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...

Christoph · Accepted Answer · 2009-11-21 20:23:39Z

14

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.

answered Nov 21, 2009 at 20:23

Christoph

171k36 gold badges188 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bmargulies Over a year ago

I'm glad that you were able to read the OP's mind and determine that he wanted to carry a NodeList around, but, as written, the question seemed to ask about an element in the tree.

Ademir Martins · Accepted Answer · 2009-12-21 17:47:03Z

0

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/.

answered Dec 21, 2009 at 17:47

Ademir Martins

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related