web-dev-qa-db-fra.com

Comment déplacer tous les enfants d'élément HTML vers un autre parent à l'aide de JavaScript?

Imaginer:

<div id="old-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="new-parent"></div>

Quel JavaScript peut être écrit pour déplacer tous les nœuds enfants (les deux éléments et les nœuds de texte) de old-parent à new-parent sans jQuery?

Je ne me soucie pas des espaces entre les nœuds, bien que je m'attende à attraper le parasite Hello World, ils devront également migrer tels quels.

EDIT

Pour être clair, je veux finir avec:

<div id="old-parent"></div>
<div id="new-parent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>

La réponse de la question à partir de laquelle il s'agit d'un duplicata proposé se traduirait par:

<div id="new-parent">
    <div id="old-parent">
        <span>Foo</span>
        <b>Bar</b>
        Hello World
    </div>
</div>
javascripthtmldom-manipulation
62
Drew Noakes

[~ # ~] démonstration [~ # ~]

Fondamentalement, vous souhaitez parcourir chaque descendant direct du nœud ancien parent et le déplacer vers le nouveau parent. Tous les enfants d'un descendant direct seront déplacés avec elle.

var newParent = document.getElementById('new-parent');
var oldParent = document.getElementById('old-parent');

while (oldParent.childNodes.length > 0) {
    newParent.appendChild(oldParent.childNodes[0]);
}
90
crush

Voici une fonction simple:

function setParent(el, newParent)
{
    newParent.appendChild(el);
}

el 'childNodes sont les éléments à déplacer, newParent est le l'élément el sera déplacé vers, afin que vous exécutiez la fonction comme:

var l = document.getElementById('old-parent').childNodes.length;
var a = document.getElementById('old-parent');
var b = document.getElementById('new-parent');
for (var i = l; i >= 0; i--)
{
    setParent(a.childNodes[0], b);
}

Voici la démo

9
Cilan

Manière moderne:

newParent.append(...oldParent.childNodes);
  1. .append Est le remplacement de .appendChild. La principale différence est qu’il accepte plusieurs nœuds à la fois et même des chaînes simples, comme .append('hello!')
  2. oldParent.childNodes Est itérable et peut donc être étendu avec ... Pour devenir plusieurs paramètres de .append()

Tableaux de compatibilité des deux (en bref: Edge 17+, Safari 10+):

2
fregante

Cette réponse ne fonctionne vraiment que si vous n'avez rien d'autre à faire que de transférer le code interne (innerHTML) de l'un à l'autre:

// Define old parent
var oldParent = document.getElementById('old-parent');

// Define new parent
var newParent = document.getElementById('new-parent');

// Basically takes the inner code of the old, and places it into the new one
newParent.innerHTML = oldParent.innerHTML;

// Delete / Clear the innerHTML / code of the old Parent
oldParent.innerHTML = '';

J'espère que cela t'aides!

0
ItsJonQ

Si vous n'utilisez pas - dans les noms d'identifiant, vous pouvez le faire

oldParent.id='xxx';
newParent.id='oldParent';
xxx.id='newParent';
oldParent.parentNode.insertBefore(oldParent,newParent);
#newParent { color: red }
<div id="oldParent">
    <span>Foo</span>
    <b>Bar</b>
    Hello World
</div>
<div id="newParent"></div>
0
Kamil Kiełczewski