document.write和innerHTML的区别

更新日期: 2019-02-28阅读: 5.3k标签: js知识分享

复制链接

新浪微博

QQ 好友

扫一扫分享

document.write只能重绘整个页面，innerhtml可以重绘页面的一部分。

1.document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。

inner1.write是dom方法,向文档写入HTML表达式或JavaScript代码，可列出多个参数，参数被顺序添加到文档中；innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。

2.两者都可向页面输出内容,innerHTML比document.write更灵活。
当文档加载时调用document.write直接向页面输出内容，文档加载结束后调用document.write输出内容会重写整个页面。通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，二是在调用该方法的的窗口之外的窗口、框架中产生新文档（务必使用close关闭文档）。
在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记，在写模式下，innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。

3.两者都可动态包含外部资源如JavaScript文件
通过document.write插入<script>元素会自动执行其中的脚本；
大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本。

1. ducument.write使用举例 html文档：

html:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题</title>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
<p>原有内容</p>
<div id="testdiv">原有内容</div>
</body>
</html>

js:

window.onload = function() {
    document.write("现有内容");
}

执行结果显示：document.write会将页面上的所有内容清除包括标题。

2. innerHTML使用举例

html：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>无标题</title>
    <script type="text/javascript" src="js.js"></script>
</head>
<body>
<p>原有内容</p>
<div id="testdiv">原有内容</div>
</body>
</html>

js:

window.onload = function() {
    var testdiv=document.getElementById('testdiv');
    testdiv.innerHTML = "<p>I love <em>JavaScript</em>!</p>";
}

执行结果显示：innerHTML只会重写所属元素的内容，即<div>元素中的内容。

链接: https://fly63.com/article/detial/2163