[Javascript] Efficiency of innerHTML over DOM tree manipulation

Steve Clay sclay at ufl.edu
Wed Jun 28 07:37:31 CDT 2006


Wednesday, June 28, 2006, 7:15:32 AM, Matt wrote:
> Is either method more efficient than the other?

Browsers are Really Good at parsing markup so innerHTML is almost always
faster. That said, I would recommend adding all the needed elements in one
shot rather than calling innerHTML in a loop. Also, if you're building
markup by concatenating strings in a loop, you might get better performance
by adding each chunk to an array then joining at the end:

markup = [];
while(loop) {
  markup.push('<!-- markup here-->');
}
target.innerHTML = markup.join('');

BTW, the "standard version" of innerHTML is a bit messy and way
undersupported: http://www.grauw.nl/blog/entry/179

Steve
-- 
http://mrclay.org/




More information about the Javascript mailing list