javascript中innerHTML 获取或替换html内容的实现代码
更新时间：2020年03月17日 09:43:47 作者：大灰牛博客
这篇文章主要介绍了javascript中innerHTML 获取或替换html内容,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
innerHTML 属性用于获取或替换 HTML 元素的内容，语法为Object.innerHTML
其中1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素；2.注意书写，innerHTML区分大小写。
我们通过id="light"获取<div> 元素，并将元素的内容输出和改变元素内容，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML属性</title>
</head>
<body>
<div id="cshi">
你好，黑夜20200317
</div>
<!-- <script type="text/javascript">
var mylight=document.getElementById('light');
document.write('原始内容:'+mylight.innerHTML+'<br/>');//输入元素内容
mylight.innerHTML='javascript tomorrow';//修改元素内容
document.write('替换内容:'+mylight.innerHTML);
</script> -->
<script type="text/javascript">
var mystr=document.getElementById('cshi');
mystr.innerHTML="DOM操作";
// document.write(mystr);
</script>
</body>
</html>
通过id获取h2标签元素,并赋给变量mychar,然后使用innerHTML属性，将获取的h2标签内容修改为"Hello world!"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
var mychar= document.getElementById('icon'); ;
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML="Hello world!";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>
总结
到此这篇关于javascript中innerHTML 获取或替换html内容的文章就介绍到这了,更多相关js替换html内容内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
- JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
- JS中innerHTML和pasteHTML的区别实例分析
- js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
- Javascript中innerHTML用法实例分析
- js innerHTML 改变div内容的方法
- Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
- javascript innerText和innerHtml应用
- JS及JQuery对Html内容编码,Html转义
- JS实现改变HTML上文字颜色和内容的方法
- JS函数修改html的元素内容,及修改属性内容的方法
- JS获取表格内指定单元格html内容的方法
相关文章
5款JavaScript颜色选择器(含jQuery插件)。2009-10-10
这篇文章主要介绍了javascript中闭包概念与用法,结合实例形式深入分析了javascript中闭包的概念、使用方法与相关注意事项,需要的朋友可以参考下2016-12-12
本篇文章主要是对js中showModalDialog参数的使用进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要为大家详细介绍了JS实现长图上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。接下来通过本文给大家介绍js中的this指针和引用，非常不错，需要的朋友参考下2016-08-08
这篇文章主要介绍了详解javascript脚本何时会被执行，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2021-02-02
最近公司需求做一个微信红包雨功能,这里给大家总结下实现的方法,这篇文章主要给大家介绍了关于uni-app微信小程序之红包雨活动的相关资料,需要的朋友可以参考下2024-01-01
本文主要介绍了几种响应式文字的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
这篇文章主要介绍了Javascript中For In语句用法,实例分析了javascript使用For In语句遍历数组的技巧,需要的朋友可以参考下2015-05-05
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果,下面这篇文章主要给大家介绍了关于微信小程序组件开发之可视化电影选座功能的相关资料,需要的朋友可以参考下2021-08-08
最新评论