'innerHTML'和'appendChild'之间的区别 [英] The difference between 'innerHTML' and 'appendChild'
问题描述
观察Chrome DevTools中的节点数量，我想知道在点击Button1之后它在点击树中的差异以及点击Button2之后的差异。
index.html
< html>
< head>
< script src =./ js / main.jstype =text / javascriptcharset =utf-8>< / script>
< link rel =stylesheethref =style / default.css>
< / head>
< body>
< div id =buttons>
< div class =buttonid =button1> Execute1< / div>
< div class =buttonid =button2> Execute2< / div>
< / div>
< div id =main>< / div>
< div id =main2>< / div>
< / body>
< / html>
main.js
$ b $函数（）{
var button1 = document.getElementById（'button1'）;
button1.addEventListener（' （）;
$ b）;
document.getElementById（'main' 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;
背景颜色：＃0080C0;
颜色：#FFFFFF;
display：-webkit-flex;
align-items：center;
justify-content：center;
光标：指针;
}
当我点击Button1时，节点数增加4。
但是，当我点击button2时，节点数会增加2。
增加2会对我有意义，因为它们可能是'div'元素和文本节点'hello2'。
但点击Button1，还有哪些其他节点被添加？
appendChild 解决方案
> innerHTML + = 将现有的父节点的DOM内容，将其串行化为HTML中的字符串，在字符串末尾添加更多HTML，擦除父节点中的现有元素，从该字符串生成DOM元素，然后将新节点附加到父节点节点。 Watching the number of nodes in Chrome DevTools, I'm wondering what the difference in the dom tree after clicking Button1 and it after clicking 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;
}
When I click the Button1, the number of nodes is incremented by 4.
But when I click the button2, the number of nodes is incremented by 2.
Be incrementing by 2 makes sense for me as they could be a 'div' element and a text node 'hello2'.
But clicking the Button1, what other nodes be appended?
Using appendChild adds a new DOM element to the end of the parent node.
Using innerHTML += takes the existing DOM content of the parent node, serialises it to HTML in a string, adds some more HTML to the end of the string, erases the existing elements in the parent node, generates DOM elements from that string, then appends the new nodes to the parent node.
这篇关于'innerHTML'和'appendChild'之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
