append()、appendChild() 和 innerHTML 的区别

文章2019-05-16871 人已阅来源：QLiuQ

概念和区别

append()

可以同时传入多个节点或字符串，没有返回值；

据说 append 还是试用期的方法，有兼容问题，（但我用了暂时火狐，谷歌，iE都能使用）。

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

appendChild()

只能传一个节点，且不直接支持传字符串【需要 appendChild(document.createTextElement('字符串'))代替】，返回追加的 Node 节点；

若 appendChild() 的参数是页面存在的一个元素，则执行后原来的元素会被移除；

例如：document.getElement("a").appendChild(document.getElementByIdx("b"))，执行后，b 元素会先被移除，然后再添加到 a 中。

innerHTML

添加的是纯字符串，不能获取内部元素的属性；不同于 appendChild 添加到的是 dom 对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

性能

innerHTML 比 appendChild 要方便，特别是创建的节点属性多，同时还包含文本的时候；

但执行速度的比较上，使用 appendChild 比 innerHTML 要快，特别是内容包括 html 标记时，appendChild 明显要快于 innerHTML，这可能是因为 innerHTML 在铺到页面之前还要对内容进行解析才能铺到页面上，当包含 html 标记过多时， innerHTML速度会明显变慢。

性能案例测试，可能会导致卡顿（介意的请不要点击运行代码）

运行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>append()、appendChild() 和 innerHTML 的区别</title>
</head>
<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>
</html>

输出结果：

append()、appendChild() 和 innerHTML 的区别