JavaScript:document.write()和innerHTML的区别

时间 2019-12-15

标签 javascript document.write document write innerhtml 区别栏目 JavaScript 繁體版

原文原文链接

document.write和innerHTMLhtml

主要区别：document.write是直接将内容写入页面的内容流，会致使页面所有重绘，innerHTML将内容写入某个DOM节点，不会致使页面所有重绘spa

下面举两个例子说明,第一个例子使用write()方法，第二个例子使用innerHTML3d

例子一：页面有初始内容，点击页面中的按钮向页面中经过document.write()方法写入内容，会发现原先的初始内容消失了，整个页面只剩下了经过write()方法写入的内容。缘由是整个页面进行了重绘code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body> 初始内容


<button onclick="fun()" >按鈕</button>


<script> function fun() { document.write("write内容"); } </script>

</body>
</html>

效果动态图：htm

举例二：页面有初始内容，在初始内容后面给定一个节点，经过innerHTML向这个节点写内容，初始内容不消失，经过innerHTML新增长的内容准确的显示在节点位置blog

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body> 初始内容<a id="p"></a>


<button onclick="fun()">按钮</button>


<script> function fun() { document.getElementById("p").innerHTML="新增长的innerHTML内容"; } </script>

</body>
</html>

效果动态图：ip