web-dev-qa-db-fra.com

Comment échanger des nœuds enfants DOM en JavaScript?

Quelle est la façon la plus simple d'échanger l'ordre des nœuds enfants?

Par exemple, je veux que childNode [3] soit childNode [4] et vice-versa.

javascriptdomnodes
34
Myforwik

Il n'y a pas besoin de clonage. Vous pouvez simplement déplacer un nœud avant l'autre avec ceci:

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]);

Vous obtenez le parent du nœud. Vous appelez ensuite la méthode insertBefore sur le parent et vous lui passez le nœud childNode [4] et vous lui dites que vous voulez l'insérer avant childNode [3]. Cela vous donnera le résultat de l'échange de leur commande, donc 4 sera avant 3 quand cela sera fait.

Référence documentation sur insertBefore .

Tout nœud inséré dans le DOM qui se trouve déjà dans le DOM est d'abord supprimé automatiquement, puis réinséré, il n'est donc pas nécessaire de le supprimer manuellement en premier.

62
jfriend00

Answer by jfriend00 n'échange pas vraiment les éléments (il "échange" uniquement les éléments qui sont côte à côte et uniquement sous le même nœud parent). C'est bon, puisque c'était la question.

Cet exemple permute des éléments en le clonant mais quels que soient leur position et leur niveau DOM:

// Note: Cloned copy of element1 will be returned to get a new reference back
function exchangeElements(element1, element2)
{
    var clonedElement1 = element1.cloneNode(true);
    var clonedElement2 = element2.cloneNode(true);

    element2.parentNode.replaceChild(clonedElement1, element2);
    element1.parentNode.replaceChild(clonedElement2, element1);

    return clonedElement1;
}

Edit: Ajout du retour de la nouvelle référence (si vous voulez conserver la référence, par exemple pour accéder à l'attribut "parentNode" (sinon il est perdu)). Exemple: e1 = exchangeElements (e1, e2);

8
StanE

Utilisation .before ou .after!

C'est Vanilla JS!

childNode[3].before(childNode[4]);

ou

childNode[4].after(childNode[3]);

Pour un échange plus durable, essayez:

function swap(node1, node2) {
    const afterNode2 = node2.nextElementSibling;
    const parent = node2.parentNode;
    node1.replaceWith(node2);
    parent.insertBefore(node1, afterNode2);
}

Cela devrait fonctionner, même si les parents ne correspondent pas

Puis-je utiliser - 86% novembre 2018

7
Gibolt

J'avais besoin d'une fonction pour échanger deux nœuds arbitraires en gardant les éléments échangés au même endroit dans le dom. Par exemple, si a était en position 2 par rapport à son parent et b était en position 0 par rapport à son parent, b devrait remplacer la position 2 de l'ancien parent de a et a devrait remplacer l'enfant 0 de l'ancien parent de b.

C'est ma solution qui permet au swap d'être dans des parties complètement différentes du dom. Notez que le swap ne peut pas être un simple swap en trois étapes. Chacun des deux éléments doit d'abord être supprimé du dom car ils peuvent avoir des frères et sœurs qui auraient besoin d'une mise à jour, etc.

Solution: j'ai mis deux div de support pour tenir la place de chaque nœud pour garder l'ordre relatif de frère. Je réinsère ensuite chacun des nœuds dans l'espace réservé de l'autre, en conservant la position relative qu'avait le nœud échangé avant l'échange. (Ma solution est similaire à celle de Buck).

function swapDom(a,b) 
{
     var aParent = a.parentNode;
     var bParent = b.parentNode;

     var aHolder = document.createElement("div");
     var bHolder = document.createElement("div");

     aParent.replaceChild(aHolder,a);
     bParent.replaceChild(bHolder,b);

     aParent.replaceChild(b,aHolder);
     bParent.replaceChild(a,bHolder);    
}
1
Jack Briner

Pour un véritable échange de tous les nœuds sans cloneNode:

    <div id="d1">D1</div>
    <div id="d2">D2</div>
    <div id="d3">D3</div>

Avec la fonction SwapNode (en utilisant PrototypeJS):

function SwapNode(N1, N2)  {
N1 = $(N1);
N2 = $(N2);

if (N1 && N2) {
    var P1 = N1.parentNode;
    var T1 = document.createElement("span");    
    P1.insertBefore(T1, N1);

    var P2 = N2.parentNode;
    var T2 = document.createElement("span");
    P2.insertBefore(T2, N2);

    P1.insertBefore(N2, T1);
    P2.insertBefore(N1, T2);

    P1.removeChild(T1);
    P2.removeChild(T2);
}
}
SwapNode('d1', 'd2');
SwapNode('d2', 'd3');

Produira:

<div id="d3">D3</div>
<div id="d1">D1</div>
<div id="d2">D2</div>
1
Buck

Essayez cette méthode:

  1. Get the parent element
  2. Stockez le two elements you want to swap

  3. Stockez le .nextSibling of the node that is last in order ex: [1,2,3,4] => nous voulons échanger 3 & 2 puis stocker nextSibling de 3, '4'.

  4. .insertBefore (3,2);

  5. .insertBefore (2, nextSibling);
0
Chad Mx