javascript中的innerHTML属性有什么作用

2021-10-29 用户投稿学习笔记 4851阅读

innerHTML在javaScript中具有双向功能，一是可以从指定的元素对象中获取内容，二是可以把自定义内容插入到指定的元素对象中去。

定义和用法

innerHTML属性用于设置或返回指定标签之间的HTML内容

Object.innerHTML = "HTML";// 设置  var html = Object.innerHTML;// 获取

例1：

QQ截图20180111133840.png

获取ID为mochu的P标签元素中的内容

<html>      <head>      <script type="text/javascript">          function getinnerHTML(){          alert(document.getElementById("mochu").innerHTML);      }      </script>      </head>    <body>      <p id="mochu"><font color="#000">这是获取到的内容！</font></p>      <input type="button" onclick="getinnerHTML()" value="点击" />      </body>  </html>

例2：

QQ截图20180111134238.png

向ID为mochu的P标签元素中插入内容

<html>      <head>      <script type="text/javascript">          function setInnerHTML(){          document.getElementById("mochu").innerHTML = "<span>这里是替换的内容包括标签</span>";          }      </script>      </head>    <body>      <p id="mochu"><font color="#000">这里是被替换掉的内容</font></p>      <input type="button" onclick="setInnerHTML()" value="点击" />      </body>  </html>

扩展笔记：

简单的说innerHTML和outerHTML、innerText与outerText的不同之处在于：

1、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。

2、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

3、innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签

代码：

document.getElementById('test').innerHTML.replace(/<.+?>/gim,'')

标签：