What is the difference between innerHTML and appendchild in JS?

Question

What’s the difference between innerHTML and the appendChild? In my opinion they are very similar.

Answer 1

appendChild(), a method, adds a new element to the DOM, so it is an action being executed with the clear intention of expanding the DOM by creating a child to an existing element, no matter what it is adding, but it needs to be a valid element. When you do this, depending on what is placed you can change the display form of the document.

innerHTML, a property, allows you to access the value contained within an element of the DOM and this value can be any text, in some cases this can make sense to the DOM and it be considered a new element. Maybe what you want to know is the difference to the use of innerHTML +=, because then, although different has some similarity, still it is a little different because it does not add something new purely and simply, it replaces what already existed with something new, then also there is a destruction. In this case you are exchanging existing text for any text (it may contain HTML) that can make sense for the DOM and this would change the way the document is shown.

If it’s not a simple text (no semantics specific to HTML) I consider it a beautiful gambiarra, it’s less robust because it accepts everything, even a poorly formed HTML; and less performative because it reconstructs the entire DOM to try to ensure that everything is ok, so it sounds like monumental work; and it’s even less secure, a lot of the HTML injection attacks are made because of this.

So it seems to me more like one of those things that people use without criterion just because they saw someone doing it somewhere and they didn’t bother to understand what it should be used for (so the question is good). Of course, in cases of exchanging one content for another it can be simple to do this. But why would you trade in HTML? Exchange the text contained in it, change a property with another Javascript method I understand, but change the HTML? Rarely does this make sense, almost every case I see use is the person trying to fix a previous wrong decision or ignorance of how these things work.

There’s a few more implications to using this bomb, and I think it goes beyond what you asked, and I’m not the right person to talk about everything.

Also consider the use of insertAdjacentHTML() and createDocumentFragment() for some situations.

Performance test

Just to illustrate how there is a good performance difference run this:

var mainNodeInner = document.createElement('div'),
    mainNodeInnerPlus = document.createElement('div'),
    mainNodeAppend = document.createElement('div'),
    sampleHTML = '<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>',
    testHTML = '',
    numSamples = 1000,
    before = null,
    after = null;
for (var i = 0; i < numSamples; i++) testHTML += sampleHTML;
mainNodeInnerPlus.innerHTML = testHTML;
before = new Date().getTime();
mainNodeInnerPlus.innerHTML += sampleHTML;
after = new Date().getTime();
console.log("TIME INNER HTML +=: " + (after - before) + " ms");
console.log("Num childs after: " + mainNodeInnerPlus.childElementCount);
console.log(' ');
var allHTML = testHTML + sampleHTML;
before = new Date().getTime();
mainNodeInner.innerHTML = allHTML;
after = new Date().getTime();
console.log("TIME INNER HTML =: " + (after - before) + " ms");
console.log("Num childs after: " + mainNodeInner.childElementCount);
console.log(' ');
mainNodeAppend.innerHTML = testHTML;
before = new Date().getTime();
var sampleNode = document.createElement('div');
sampleNode.innerHTML = sampleHTML;
while (sampleNode.hasChildNodes()) mainNodeAppend.appendChild(sampleNode.firstChild);
after = new Date().getTime();
console.log("TIME APPEND CHILD: " + (after - before) + " ms");
console.log("Num childs after: " + mainNodeAppend.childElementCount);

I put in the Github for future reference.

Source.

See another test in your browser (may vary according to implementation).