Javascript 与#x27；innerHTML'；和'；追加儿童'；_Javascript_Html_Google Chrome_Google Chrome Devtools

Javascript 与#x27；innerHTML'；和'；追加儿童'；

javascript html google-chrome google-chrome-devtools

Javascript 与#x27；innerHTML'；和'；追加儿童'；,javascript,html,google-chrome,google-chrome-devtools,Javascript,Html,Google Chrome,Google Chrome Devtools,看着Chrome开发工具中的节点数量，我想知道单击按钮1后dom树和单击按钮2后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&g

看着Chrome开发工具中的节点数量，我想知道单击按钮1后dom树和单击按钮2后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>

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

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

innerHTML

将只更新您所引用的DOM html元素节点

另一方面，“appendChild”将向上下文中的“父”元素添加嵌套的DOM HTML元素（子）节点。

例如：对于

它将附加它的子节点-即

使用

appendChild

将新的DOM元素添加到父节点的末尾

使用

innerHTML+=

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

innerHTML和appendChild之间的区别 Jquery/Javascript:innerHTML和appendChild之间的区别是什么

答复:

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

一个使用DOM，另一个使用浏览器功能。相关：那么，最后，使用'innerHTML+='的附加节点是'div'和'hello1'的文本节点？

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);
    });
} );

#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;
}