I have a problem when appending new element with JavaScript. I don't use any library such as jQuery or anything else, i'm using native JavaScript while doing this.
Okay, i'm trying to append a new element to the <body> tag. If in jQuery you can use the .append() function, but when using native JavaScript you must use .innerHTML.
Here's my HTML code
<button id="add">
Add
</button>
Here's my JavaScript code
document.getElementById("add").addEventListener("click", (e) => {
document.getElementsByTagName("body")[0].innerHTML += '<p>Hello world</p>';
});
When i click the 'add' button it's works the first time. But, when i click again it doesn't work. When i try to use jQuery to append new element then it works, is there any less?
I have a problem when appending new element with JavaScript. I don't use any library such as jQuery or anything else, i'm using native JavaScript while doing this.
Okay, i'm trying to append a new element to the <body> tag. If in jQuery you can use the .append() function, but when using native JavaScript you must use .innerHTML.
Here's my HTML code
<button id="add">
Add
</button>
Here's my JavaScript code
document.getElementById("add").addEventListener("click", (e) => {
document.getElementsByTagName("body")[0].innerHTML += '<p>Hello world</p>';
});
When i click the 'add' button it's works the first time. But, when i click again it doesn't work. When i try to use jQuery to append new element then it works, is there any less?
Share Improve this question asked Oct 20, 2017 at 18:56 nauvalnauval 1691 gold badge4 silver badges13 bronze badges 5-
4
but when using native JavaScript you must use
innerHTMLWhere did you learn that? – user663031 Commented Oct 20, 2017 at 19:04 - Possible duplicate of Is it possible to append to innerHTML without destroying descendants' event listeners? – Sebastian Simon Commented Oct 20, 2017 at 19:08
- 1 fun fact: jquery is not using innerHTML for this – GottZ Commented Oct 20, 2017 at 19:28
- @torazaburo I learned it myself, so what should I use? – nauval Commented Oct 21, 2017 at 4:31
- I think I have the wrong thinking about appending in JavaScript :D – nauval Commented Oct 21, 2017 at 4:32
3 Answers
Reset to default 9You're replacing the entire contents of your body with all new contents, wiping out any elements and any events attached to them.
Don't overwrite .innerHTML. Use .appendChild():
document.getElementById('add').addEventListener('click', function() {
var p = document.createElement('p');
p.textContent = 'Hello world';
document.body.appendChild(p);
});<button id="add">Add</button>Or, if you're going to be appending more than one item, create a document fragment, do all your preliminary work on that, then append that to the DOM. The advantage of this method is that the DOM will only be redrawn once. Example:
var frag = document.createDocumentFragment();
var topSquare = document.createElement('div');
frag.appendChild(topSquare);
var rightSquare = document.createElement('div');
frag.appendChild(rightSquare);
document.getElementsByTagName('body')[0].appendChild(frag);
Or, if you absolutely have to use an HTML string for some reason, use this method:
var htmlString = '<p>Hello world</p>';
var para = document.createRange().createContextualFragment(htmlString);
document.getElementsByTagName('body')[0].appendChild(para);
Try this
document.getElementById("add").addEventListener("click", (e) => {
document.getElementById("k").innerHTML += '<p>Hello world</p>';
});<button id="add">
Add
</button>
<div id= "k"></div>