Question

I’m trying to build a section tag from the ground up using documentFragment(). It will include an h1 tag an article tag, which were initially being added with appendChild(). This section tag will also be cloned at some point and adjusted using cloneNode().

Then I found out that appendChild() is buggy in IE along with articles from Nick Zakas, Paul Irish and Steve Souders quantifying how much appendChild sucks. I searched through S.O. for an alternative and using insertBefore and firstChild seems to be the general consensus. As I want to insert nodes inside of other nodes, I’m not sure if insertBefore is an option here.

To be fair, this may not be the most efficient code. It’s probably faster to code in the section tag with all the child nodes on the page then it is to script everything, then load it onto the page. And when I clone it, it will be easy to just find child nodes with firstChild and then adjust them. But before I do that, I just want to make sure that there’s no other way to insert nodes inside of an element other than appendChild()?

Thanks in advance…kaidez

Answer 1

There’s nothing wrong with appendChild() so long as you don’t try to use it on an element that is still being rendered by the browser. Wait until the DOMContentLoaded or load event fires on the document and you’ll be fine.