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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。