How to append DOM Element into an empty element in JavaScript?

Question

I have bunch of objects that return a DOM-tree that I then use to append to an element. For example,

var elem = document.createElement('div');
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());

and I will eventually end up in something like:

<div>
<div id="...">...</div>
<div id="...">...</div>
<div id="...">...</div>
</div>

Those three DIVs were created by third party code, and I am wrapping them around my DIV tag here, but what I want instead is to just append them to an empty element, but it doesn't work:

var elem = document.createElement('');
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());
elem.appendChild(callSomePrototypesMethod());

Expected results:

<div id="...">...</div>
<div id="...">...</div>
<div id="...">...</div>

I'm not sure if this makes any sense to you, but I need to use DOM, and I can't put those content within any other elements...

Answer 1

That's what document fragments are for. You can create a new fragment via document.createDocumentFragment() and use it as if it were a single element.

Answer 2

If you want insert the specifieds elements directly in the body of document (not inside an other element like a 'div'), try

document.body.appendChild( callSomePrototypesMethod() );

There is a note about 'document.body.appendChild' in IE. See http://danielsaidi.wordpress.com/tag/documentbodyappendchild/.