Question

观察Chrome DevTools中的节点数量，我想知道点击Button1之后dom树的差异以及点击Button2之后的差异。

的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，还会追加其他节点？

enter image description here

Answer 1

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

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

Answer 2

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

答案：

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

please_read_the link

Answer 3

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

Answer 4

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

＆＃39;使用appendChild＆＃39;另一方面，将一个嵌套的DOM HTML元素（子）节点添加到您的＆＃34; parent＆＃34;元素在上下文中。例如：对于<ul>，它会追加它的孩子 - 即<li>

＆lt; innerHTML＆＃39;之间的区别和＆＃39; appendChild＆＃39;

4 个答案: