Home Is there a performance enhancement to create dom elements native vs innerHTML?

Questions

Is there a performance enhancement to create dom elements native vs innerHTML?

April 1, 2022

Suppose I want to do this:

let el = document.getElementById("some_div");
el.innerHTML = "<div><h3>Hello There</h3><div>Hello World</div></div>";

Would it be better to write it as:

let outer_div = document.createElement("div");

let h3 = document.createElement("h3");

let inner_div = document.createElement("div");

let hello = document.createTextNode("Hello World");

inner_div.appendChild(hello);
outer_div.appendChild(h3);
outer_div.appendChild(inner_div);

Or does it not even matter coding wise in todays’ environments?

>Solution :

I suggest to use createElement. It is faster and more secure. Imagine you load user input directly into your DOM with innerHTML. This can be a nasty security hole.