document.write、innerHTML、innerText的区别

1、document.write是DOM方法,向文档写入HTML表达式或JavaScript代码,可列出多个参数,参数被顺序添加到文档中

innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

2、document.write:

当文档加载时调用document.write直接向页面输出内容,文档加载结束后调用document.write输出内容会重写整个页面

innerHTML:

在读模式下,innerHTML属性返回与调用元素的所有子节点对应的HTML标记,

在写模式下,innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

3、document.write、innerHTML都可动态包含外部资源如JavaScript文件

通过document.write插入<script>元素会自动执行其中的脚本;

大多数浏览器中,通过innerHTML插入<script>元素并不会执行其中的脚本。

4、innerText
获取从起始位置到终止位置的内容,但它去除Html标签。
火狐浏览器不支持该标签,但所有浏览器都支持 innerHTML标签。

总结:
        innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器(现在也适应chrome浏览器),因此,尽可能地去使用 innerHTML,而少用innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签。

write会导致页面重新绘制,而且性能略低于innerHTML,所有推荐使用innerHTML.
 

// 测试innerHTML

//该方法有误
//var testDiv = document.getElementById('tr1');
//testDiv.inerHTML = "<p>I love <em>JavaScript</em>!</p>";

//该方法正确,我也不知道为什么,请大神指教
  document.getElementById('tr1').innerHTML = "ddd<br/>ddd";

//下面方法会导致页面重绘
//document.write("ddd" + "<br/>");

//innerText用于获取或设置 HTML标签里的text文本
//document.getElementById("testInner").innerText = "changedddd";
//一个简单的符合W3C标准的示例
//弹出的为去掉HTML标签之后的内容
<html>  
    <head><title>innerHTML</title></head>  
    <body>  
        <div id="d1"><p id="p1">hello world </p></div>  
        <script>  
            var content = document.getElementById("p1");  
            alert(content.innerHTML.replace(/& lt;.+?>/gim,''));  
        </script>  
    </body>  
</html>  

猜你喜欢

转载自blog.csdn.net/m0_64346035/article/details/125125157
今日推荐