Check out benchmarks.
It seems to me, typically appending a child is faster in all browsers but not in IE.
I will say that i'm surprised at how well createElement() is faring in later versions of chrome and firefox, looks like they are closing the gap. I can remember there being a much larger advantage for innerHTML when firefox was in the single digits. at this point, i don't think we can pick a winner in the raw execution time performance benchmark. i'll concede my point that innerHTML is much faster, and say from now on that it's about the same.
you can still see that RAM use is higher under createElement(), but folks don't jump up and down about RAM like they do CPU for some reason...
to me, the bottom line of all this research demonstrates that innerHTML does indeed work, but is not really faster than createElement() anymore.
can we agree on that?
And I think we can all agree that
document.write()should not be used anymore in any case.
Thank you for the in-depth discussion. But the concatenated document.write works on the page, and until it doesn't I see no reason to replace it to save a millisecond of loading time.
OK. I take the advice. document.write is on its last legs, but in my case the fact that it wipes out the page isn't actually an issue.
I was really only asking why ie 9 & 10 have a problem with it when other browsers don't.
Only ie 9 & 10, as far as I have checked, read the first instance of document.write and refuse to read the second line.
I just wondered why this would be. How do the latest incarnations of ie do these things differently?
Works as you would expect in IE10.Code:
Thank you Philip. I suspect you are correct.
Might I suggest that this wonderful forum is becoming a way to argue rather than solve?
Hey, stop. Please! I like your input. Always have.
But I asked a specific question. I still have had no answer...
(perhaps there is none... I'm not expecting one)
we do like to have debates on controversial topics, and it's the main benfit for knowlwedgable folks to use the site. If all we did all day was explain how to use $.ready(), we'de go nuts! I don't mind helping along the way, sorry if you got lost in the fog of war. here's your answer:
the problem is that document.write expects to write HTML. when you write() opening tags without closers, as in your first line, the DOM "quirks up" it's own closing tag out of nowhere. then you write a param tag as a sibling of the empty <object> tag, along with a sibling embed tag. then you write a closing tag to a tag that was self-closed many steps ago.
the same issue would happen with innerHTML, though it would be impossible to mess up like that with createElement(), which always produces well-formed HTML.
in short, you have to add whole legit pieces of html when you use write()/innerHTML to prevent the browser from making it well-formed for you.
There are a few places where innerHTML doesn't work but it works in lots more situations than document.write does.
the WHATWG HTML spec (emphasis added):
Since you're loading a plug-in, that could be affecting the way the code is being processed while the plug-in is being fetched/loaded.Quote:
Warning! This method has very idiosyncratic behavior. In some cases, this method can affect the state of the HTML parser while the parser is running, resulting in a DOM that does not correspond to the source of the document (e.g. if the string written is the string "<plaintext>" or "<!--"). In other cases, the call can clear the current page first, as if document.open() had been called. In yet more cases, the method is simply ignored, or throws an exception. To make matters worse, the exact behavior of this method can in some cases be dependent on network latency, which can lead to failures that are very hard to debug. For all these reasons, use of this method is strongly discouraged.