简述document.write和 innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。
innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。
innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。
ducument.write使用举例
<!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>window.onload = function() {
document.write("现有内容");
}执行结果显示:document.write会将页面上的所有内容清除包括标题。
innerHTML使用举例
<!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>window.onload = function() {
var testdiv=document.getElementById('testdiv');
testdiv.innerHTML = "<p>I love <em>JavaScript</em>!</p>";
}执行结果显示:innerHTML只会重写所属元素的内容,即<div>元素中的内容。
标签:document,write,innerHTML