当前位置:酷百书>生活百科>简述document.write和 innerHTML的区别

简述document.write和 innerHTML的区别

2023-03-02 18:03:00 编辑:join 浏览量:614

简述document.write和 innerHTML的区别

简述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

版权声明:文章由 酷百书 整理收集,来源于互联网或者用户投稿,如有侵权,请联系我们,我们会立即处理。如转载请保留本文链接:https://www.kubaishu.com/life/157096.html
热门文章