innerHTML or appendChild ... Which is faster?

[hsriat]

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...
First:[code=javascript]var inp = document.create Element('input' );
inp.className = 'abc';
inp.type = 'text';
inp.value .......
.....
....
document.getEle mentById('divId ').appendChild( inp);[/code]

Second:[code=javascript]document.getEle mentById('divId ').innerHTML = '<input type="text" class="abc" value=......... .......... >';[/code]

Since I have to call this same function many times, which will give better results as far as performance is concerned?

[acoder]

Definitely innerHTML - see innerHTML vs. DOM.

[mrhoo]

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.

[hsriat]

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.