web-dev-qa-db-ja.com

「カットアンドペースト」-JavaScriptを使用したDOM内のノードの移動

おおよそ次のようなhtmlコードがあります。

<div id="id1">
  <div id="id2">
    <p>some html</p>
    <span>maybe some more</span>
  </div>
  <div id="id3">
    <p>different text here</p>
    <input type="text">
    <span>maybe even a form item</span>
  </div>
</div>

明らかにそれだけではありませんが、それが基本的な考え方です。 ＃id2と＃id3の場所を切り替えるだけなので、結果は次のようになります。

<div id="id1">
  <div id="id3">...</div>
  <div id="id2">...</div>
</div>

DOM内の位置を交換するために2つのノード（およびそのすべての子）を読み書きできる関数（私がこの機能を最初に要求する人ではないと確信しています）を知っている人はいますか？

javascriptdom
36
user41435

この場合、document.getElementById('id1').appendChild(document.getElementById('id2'));がうまくいくはずです。

より一般的には、insertBefore()を使用できます。

54
Greg

この関数は、渡されたノードを受け取り、指定されたタグでラップします。例のコードスニペットでは、spanタグをセクションタグでラップしました。

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}
let toWrap = document.querySelector("#hi");
wrap(toWrap, "section");
console.log(document.querySelector("section > #hi"), " section wrapped element");
<span id="hi">hello there!</span>
0
zfrisch