Performance/Goodness Design issue innerHTML += versus appendChild("li")

Question

I have a output logging div which will usual contain hundreds of entries over time added to incrementally. Would it be better to append new output via: -

myDiv.innerHTML += "Another logged message<br/>";

or to add a LI child element to the DIV via something like: -

            var listItem = document.createElement("li");
            listItem.innerHTML = rowData.replace(/\s+$/,'');
            listItem._key = rowKey;
            myDiv.appendChild(listItem);

I don't plan to need events or other user interaction with individual messages. Just display purposes.

Does it matter?

innerHTML will most likely be slower. I am sure a simple test page could prove that. — epascarello, Jul 13 '17 at 15:15

score 1 · Accepted Answer · answered Jul 13 '17 at 15:16

1

Appending to innerHTML will replace and re-parse the entire existing HTML structure.

It will lose user state (eg, focus), properties, event handlers, and any other state not in the HTML, and will be much slower.

You should never do that.

answered Jul 13 '17 at 15:16

SLaks

868,454
176
1,908
1,964

Performance/Goodness Design issue innerHTML += versus appendChild("li")

1 Answers1