InnerHTML slow?

Question

I'm using javascript to add 160 rows into a table with 10 columns. If I do:

var cellText = document.createTextNode(value);
cell.appendChild(cellText);
row.appendChild(cell);

It takes no time at all to render, but if I switch to cell.innerHTML = value, it takes significantly slower to render. Do we have another option to render HTML elements inside a cell faster?

BTW, the problem appears to be only on IE (IE 11 to be more specific). It's fine in Google Chrome.

I'm using .NET AjaxToolkit.

Answer 1

innerHTML is slow because it has to look for HTML tags in the value, and parse it into DOM nodes. If you're just inserting plain text that doesn't contain any HTML tags, use textContent instead.

If you need to create complex HTML in the cell, using innerHTML is probably going to be the fastest way, as optimizing HTML parsing has always been a priority of browser designers. But if the HTML is simple (e.g. just a couple of elements) it may be more efficient to create them in Javascript. You'll need to benchmark your specific application to find out where the break-even point is.