JavaScript innerHTML vs createElement
innerHTML and createElement() when it comes to creating new elements in the DOM tree.#1) createElement is more performant
Suppose that you have a div element with the class container:
<div class="container"></div>Code language: HTML, XML (xml)
You can new elements to the div element by creating an element and appending it:
let div = document.querySelector('.container');let p = document.createElement('p');
p.textContent = 'JS DOM';
div.appendChild(p);
Code language: JavaScript (javascript)
You can also manipulate an element’s HTML directly using innerHTML like this:
let div = document.querySelector('.container');
div.innerHTML += '<p>JS DOM</p>';Code language: JavaScript (javascript)
Using innerHTML is cleaner and shorter when you want to add attributes to the element:
let div = document.querySelector('.container');
div.innerHTML += '<p class="note">JS DOM</p>';Code language: JavaScript (javascript)
However, using the innerHTML causes the web browsers to reparse and recreate all DOM nodes inside the div element. Therefore, it is less efficient than creating a new element and appending to the div. In other words, creating a new element and appending it to the DOM tree provides better performance than the innerHTML.
#2) createElement is more secure
As mentioned in the innerHTML tutorial, you should use it only when the data comes from a trusted source like a database.
If you set the contents that you have no control over to the innerHTML, the malicious code may be injected and executed.
#3) Using DocumentFragment for composing DOM Nodes
Assuming that you have a list of elements and you need in each iteration:
let div = document.querySelector('.container');for (let i = 0; i < 1000; i++) {
let p = document.createElement('p');
p.textContent = `Paragraph ${i}`;
div.appendChild(p);
}
Code language: JavaScript (javascript)
This code results in recalculation of styles, painting, and layout every iteration. This is not very efficient.
To overcome this, you typically use a DocumentFragment to compose DOM nodes and append it to the DOM tree:
let div = document.querySelector('.container');// compose DOM nodes
let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
let p = document.createElement('p');
p.textContent = `Paragraph ${i}`;
fragment.appendChild(p);
}
// append the fragment to the DOM tree
div.appendChild(fragment);
Code language: JavaScript (javascript)
In this example, we composed the DOM nodes by using the DocumentFragment object and append the fragment to the active DOM tree once at the end.
A document fragment does not link to the active DOM tree, therefore, it doesn’t incur any performance.
Check it out the DocumentFragment tutorial for more detail.