Comment ajouter l'élément DOM dans un élément vide en JavaScript?

Question

J'ai un tas d'objets qui retournent un arbre DOM que j'utilise ensuite pour l'ajouter à un élément. Par exemple,

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

et je finira par se retrouver dans quelque chose comme:

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

Ces trois DIVs ont été créés par le code tiers, et je les enrouler autour de mon balise DIV, mais ce Je veux plutôt est de les ajouter juste un élément vide, mais il ne fonctionne pas:

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

résultats attendus:

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

Je ne sais pas si cela a un sens pour vous, mais je dois utiliser DOM, et je ne peux pas mettre les contenus à l'intérieur d'autres éléments ...

Answer 1

C'est ce que document fragments sont pour. Vous pouvez créer un nouveau fragment via document.createDocumentFragment() et l'utiliser comme s'il s'agissait d'un seul élément.

Answer 2

Si vous souhaitez insérer les éléments specifieds directement dans le corps du document (pas à l'intérieur d'un autre élément comme un « div »), essayez

document.body.appendChild(callSomePrototypesMethod());

Il y a une note sur « document.body. appendChild 'dans IE. Voir http://danielsaidi.wordpress.com/tag/documentbodyappendchild/.