'innerHTML' 和 'appendChild' 的区别答案

【问题标题】：The difference between 'innerHTML' and 'appendChild''innerHTML' 和 'appendChild' 的区别
【发布时间】：2014-06-13 20:59:56
【问题描述】：

查看 Chrome DevTools 中的节点数，我想知道单击 Button1 后的 dom 树和单击 Button2 后的 dom 树有何不同。

index.html

<html>
<head>
    <script src="./js/main.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="style/default.css">
</head>
<body>
    <div id="buttons">
        <div class="button" id="button1">Execute1</div>
        <div class="button" id="button2">Execute2</div>
    </div>    
    <div id="main"></div>
    <div id="main2"></div>
</body>
</html>

main.js

document.addEventListener( "DOMContentLoaded", function() {
    var button1 = document.getElementById('button1');
    button1.addEventListener('click', function() {
        document.getElementById('main').innerHTML += '<div>hello</div>';
    });

    var button2 = document.getElementById('button2');
    button2.addEventListener('click', function() {
        var div = document.createElement('div');
        div.appendChild(document.createTextNode('hello2'));
        document.getElementById('main2').appendChild(div);
    });
} );

default.css

#buttons {
    display:-webkit-flex;
    align-items: center;    
}

.button {
    height: 30px;
    width: 100px;
    margin: 5px;
    background-color: #0080C0;
    color: #FFFFFF;
    display:-webkit-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

当我单击 Button1 时，节点数增加 4。
但是当我点击button2时，节点数增加了2。
增加 2 对我来说很有意义，因为它们可能是一个“div”元素和一个文本节点“hello2”。
但是点击Button1，还追加了哪些其他节点？

【问题讨论】：

一个使用 DOM，另一个使用浏览器功能。
相关：stackoverflow.com/questions/2305654/…

标签： javascript html google-chrome google-chrome-devtools

【解决方案1】：

使用appendChild 将新的DOM 元素添加到父节点的末尾。

使用 innerHTML += 获取父节点的现有 DOM 内容，将其序列化为字符串中的 HTML，在字符串末尾添加更多 HTML，擦除父节点中的现有元素，从中生成 DOM 元素字符串，然后将新节点附加到父节点。

【讨论】：

那么，最后，使用'innerHTML +='的附加节点是'div'和'hello1'的文本节点？

【解决方案2】：

innerHTML 和 appendChild 的区别 Jquery / Javascript：innerHTML 和 appendChild 有什么区别？

答案：

appendChild 用于在 DOM 中插入新节点。 innerHTML 是 DOM 的一个属性，它允许将元素的内容替换为不同的 HTML，它会自动解析为 DOM 节点。

please_read_the link

【讨论】：

【解决方案3】：

innerHTML 将替换所有内容，addChild 将在我认为的现有内容中添加一个子项

【讨论】：

【解决方案4】：

innerHTML 只会更新您所指的 DOM html 元素节点。

另一方面，

'appendChild' 会将嵌套的 DOM HTML 元素（子）节点添加到上下文中的“父”元素。例如：对于<ul>，它将附加它的孩子——即<li>

【讨论】：