By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,695 Members | 1,638 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,695 IT Pros & Developers. It's quick & easy.

innerHTML or appendChild ... Which is faster?

Expert 100+
P: 1,654
I have to make a dynamic page which contains only div elements.

Now in each div, I have to add inputs, textareas, a etc.

Two options I have...
Expand|Select|Wrap|Line Numbers
  1. var inp = document.createElement('input');
  2. inp.className = 'abc';
  3. inp.type = 'text';
  4. inp.value ....... 
  5. ..... 
  6. .... 
  7. document.getElementById('divId').appendChild(inp);
Expand|Select|Wrap|Line Numbers
  1. document.getElementById('divId').innerHTML = '<input type="text" class="abc" value=................... >';
Since I have to call this same function many times, which will give better results as far as performance is concerned?
May 6 '08 #1
Share this Question
Share on Google+
3 Replies

Expert Mod 15k+
P: 16,027
Definitely innerHTML - see innerHTML vs. DOM.
May 6 '08 #2

P: 428
Whichever you use, the real time gets taken up with rendering the page, especially with rendering the page several times. Try to build the new content off-stage and display it all at once.
May 6 '08 #3

Expert 100+
P: 1,654
Definitely innerHTML - see innerHTML vs. DOM.
That was a wonderful page!!!
I compared the tests in all the four browsers.
Opera is the fastest, taking 80ms for the DOM thing.
Then came safari with 100 ms.
My favorite Firefox could not catch them and was at 210ms..

And poor dude IE6 took more than 1 second!!

Thanks alot... :)

PS: I think Firefox took so much time as there were plenty of other tabs too, and all the other browsers just had one tab.
May 6 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.