for ajax data insertion in page what is faster than innerHTML ?

Question

I'm doing an ajax work where web service will return data and on client side and I am creating html table with data. I am using var (to hold string of generated html code), do string concatenations to generate table, tr and td tags and put data in it. Then I put this html table with data into a div using innerHTML. Please note I am applying inline css in this dynamic html code.

The issue I am facing is the web service will return a huge amount of data. What I tested is even on local machine it took about 10-12 minutes to process (concatenating, creating tags putting data in table, applying css) 10000 rows. Stored procedure just take 3-4 seconds in returning data. Please guide me how this in-browser processing time can be reduced ? I am doing it for speed in some wrong way ? Or is there some technique for it or some method faster than innerHTML and string concatenations ?

thanks

Answer 1

It's often a lot faster to create an element first, and then append it to the DOM after. Try this:

if (document.createTextNode) {
    // Create the element
    var txtNode = document.createTextNode("Hello. This is a new node."); 
    // Append it to another object
    document.getElementById("mydiv").appendChild(txtNode);
}

Answer 2

What I tested is even on local machine it took about 10-12 minutes to process (concatenating, creating tags putting data in table, applying css) 10000 rows

That's a whole lot of data to display in the browser. Specially once you make it remote.

Why are you trying to show so much data on the browser in the first place, I think there is something off in the whole idea.

I suggest describing more of your scenario, but this will probably become a non issue once you are working with a normal amount of data to display on a browser page.

Answer 3

innerHTML is supposedly faster than DOM manipulation (I have never tested it myself, but that's what I read at several places). Also, pushing strings into an array then joining is supposedly a lot faster on IE than concatenation.