Faster alternative to jQuery's .html function?

Question

I was wondering if there is an alternative to the jquery .html(variable) function? It seems to be quite slow and also freezes while inserting the html into the DOM.

I tried using innerHtml, and that works great, extremely fast as well. But for some reason, when I have any jquery or MS ajax in the code that is inserted, those scripts ONLY work in FF.

I'm trying to insert around 2000 lines of code.

Answer 1

Would be great, if you were more specify about your problem. Generally speaking, there is no need to make 2000 .html() updates, you have to join it into bigger .html() calls, because after each .html() whole DOM is rebuild, which causes slow down.

Answer 2

The problem is that the jquery or ms ajax (javascript) code you insert in the page is not evaluated. the .html method in jquery does it for you, but if you want to use .innerHtml, you have to evaluate it manually, using the eval() function:

eval(«javascript code here»);

So the steps are, insert the html using innerHtml, then evaluate only the javascript part using the eval function.

Answer 3

I was just reading this answer and there was a link in the comments about using DOM document fragments and how fast it is compared to the "normal" method ... check it out. It doesn't actually compare the benchmarks to jQuery, but it'll give you a general idea.