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?
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?
- One uses the DOM and the other a browser feature. – DanMan Commented Apr 28, 2014 at 10:45
- 2 Related: stackoverflow./questions/2305654/… – user3071008 Commented Apr 28, 2014 at 10:47
4 Answers
Reset to default 10Using 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.
Difference between innerHTML and appendChild Jquery / Javascript : What is the difference between innerHTML and appendChild?
Answer :
appendChild is used to insert new node in DOM. innerHTML is a property of DOM that allows to replace content of an element with different HTML, which automatically gets parsed into DOM nodes.
please_read_the link
innerHTML will replace all the content, and addChild will add a child to the existing ones i think
innerHTML will just update the DOM html element node you are referring to.
'appendChild' on the other hand, will add a nested DOM HTML element (child) node to your "parent" element in context.
for example: for a <ul> it will append it's child - that is <li>