document.write、innerHTML、innerText的区别

燕穗子博客

已于 2022-06-08 08:32:21 修改

阅读量552

点赞数 1

分类专栏： IT面试 JavaScript 文章标签： javascript html 前端微信小程序 html5

于 2022-06-04 20:23:28 首次发布

本文链接：https://blog.csdn.net/m0_64346035/article/details/125125157

版权

IT面试同时被 2 个专栏收录

96 篇文章 35 订阅

订阅专栏

JavaScript

68 篇文章 13 订阅

订阅专栏

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>

燕穗子博客

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
document.write、innerHTML、innerText的区别

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

扫一扫