append()、appendChild() 和 innerHTML 的區別

時間 2019-12-04

標籤 append appendchild innerhtml 區別欄目 HTML 简体版

原文原文鏈接

概念和區別：
append()
能夠同時傳入多個節點或字符串，沒有返回值；javascript

聽說 append 仍是試用期的方法，有兼容問題，（但我用了暫時火狐，谷歌，iE都能使用）。html

https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/appendjava

appendChild()
只能傳一個節點，且不直接支持傳字符串【須要 appendChild(document.createTextElement('字符串'))代替】，返回追加的 Node 節點；app

若 appendChild() 的參數是頁面存在的一個元素，則執行後原來的元素會被移除；dom

例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，執行後，b 元素會先被移除，而後再添加到 a 中。性能

innerHTML
添加的是純字符串，不能獲取內部元素的屬性；不一樣於 appendChild 添加到的是 dom 對象，返回的也是 dom 對象，能夠經過 dom 對象訪問獲取元素的各類屬性。3d

性能
innerHTML 比 appendChild 要方便，特別是建立的節點屬性多，同時還包含文本的時候；
但執行速度的比較上，使用 appendChild 比 innerHTML 要快，特別是內容包括 html 標記時，appendChild 明顯要快於 innerHTML，這多是由於 innerHTML 在鋪到頁面以前還要對內容進行解析才能鋪到頁面上，當包含 html 標記過多時， innerHTML速度會明顯變慢。htm

案例：對象

<body>
<div id="test1"></div><br>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div><br>
<input type="button" onclick="appendTest()" value="testAppendChild">

<script type="text/javascript">
function innerTest() {
var t1 = (new Date()).getTime();
var a = "<b>apple</b>";
var b = document.getElementById("test1");
for (var i = 0; i < 500; i++) {
b.innerHTML += a;
}
t2 = (new Date()).getTime();
console.log("testInnerHTML:" + (t2 - t1));
}

function appendTest() {
var t1 = (new Date()).getTime();
var b = document.getElementById("test2");
for (var i = 0; i < 500; i++) {
var a = document.createElement("b");
a.appendChild(document.createTextNode("apple"));
b.appendChild(a);
}
t2 = (new Date()).getTime();
console.log("testAppendChild:" + (t2 - t1));
}
</script>
</body>
輸出結果：blog

相關標籤/搜索

每日一句

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