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.