document.write()和innerHTML区别
2018-11-10 本文已影响0人
Leaf_Ysm
document.write()和innerHTML都是网文档中添加标记的技巧函数，但是两者存在这一些区别。
我们新建一个简单的项目，来区分这两者的区别：
项目结构如图所示：
1.png
包含一个js文件和一个html文件。
先来说一说“document.write()”
document.write()最大的缺点是违背了“行为应该与表现分离”的原则，即使把document.write()语句挪到外部函数里，也还是需要在标记的<body>部分里使用<script>标签才能调用那个函数。
test.html 文件：
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="example.js"></script>
</head>
<body>
<p>1</p>
<script>write()</script>
<p>2</p>
<p>3</p>
</body>
</html>
example.js文件：
function write(){
document.write("<p>asdasd</p>");
}
可以看见，即使在example.js文件中已有document.write，但是还是要在html文件的<body>标记里利用<script>标记调用example.js文件里的write函数才可以将我们的内容插入到需要的地方；
再来说一说innerHTML：
test.html 文件：
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>1</p>
<div id="test"></div>
<p>2</p>
<p>3</p>
<script type="text/javascript" src="example.js"></script>
</body>
</html>
example.js文件：
function write(){
var test = document.getElementById("test");
test.innerHTML="<p>asdasd</p>"
}
write();
而利用innerHTML则可以直接在example.js文件里就将内容插入到我们需要的地方。
