web-dev-qa-db-ja.com

JavaScriptでDOM子ノードを交換する方法は？

子ノードの順序を入れ替える最も簡単な方法は何ですか？

たとえば、childNode [3]をchildNode [4]に、またその逆にしたいとします。

javascriptdomnodes
34
Myforwik

クローンを作成する必要はありません。これを使用すると、1つのノードを他のノードの前に移動できます。

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

ノードの親を取得します。次に、親でinsertBeforeメソッドを呼び出し、それにchildNode [4]ノードを渡し、childNode [3]の前に挿入することを伝えます。それはあなたが彼らの順序を交換した結果をあなたに与えるので、それが終わったとき、4は3の前になります。

参照 insertBeforeに関するドキュメント 。

すでにDOM内にあるDOMに挿入されたノードは、最初に自動的に削除されてから挿入されるため、最初に手動で削除する必要はありません。

62
jfriend00

Jfriend00による回答は実際には要素を交換しません（隣り合って同じ親ノードの下にある要素のみを「交換」します）。これが問題だったので、これは問題ありません。

この例では、位置と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;
}

編集：新しい参照の戻り値を追加しました（参照を保持したい場合、たとえば属性「parentNode」にアクセスする場合（そうでない場合は失われます））例：e1 = exchangeElements（e1、e2）;

8
StanE

使用する .beforeまたは.after！

バニラJSです！

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

または

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

より多くの耐久性スワッピングについては、以下を試してください：

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

両親が一致しなくてもこれはうまくいくはずです

使用できます -2018年11月86％

7
Gibolt

スワップされた要素をdom内の同じ場所に維持しながら、2つの任意のノードをスワップする関数が必要でした。たとえば、aがその親に対して2番目の位置にあり、bがその親に対して0番目の位置にある場合、bは位置2を置き換える必要がありますaの以前の親とaはbの以前の親の子0を置き換える必要があります。

これは、スワップをdomの完全に異なる部分に配置できるようにする私のソリューションです。スワップは単純な3ステップのスワップにはなりません。 2つの要素には、更新が必要な兄弟などがあるため、最初にdomから削除する必要があります。

解決策：相対的な兄弟の順序を維持するために、各ノードの場所を保持するために2つのホルダーdivを配置しました。次に、各ノードを別のノードのプレースホルダーに再挿入し、交換前の交換されたノードの相対位置を維持します。 （私のソリューションはバックのものに似ています）。

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

CloneNodeのないノードの実際のスワップの場合：

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

SwapNode関数を使用（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');

生成されます：

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

この方法を試してください：

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

  3. .nextSibling of the node that is last in order例：[1,2,3,4] => 3と2を入れ替えてから、nextSiblingの3、 '4'を格納します。

  4. .insertBefore（3,2）;

  5. .insertBefore（2、nextSibling）;
0
Chad Mx