javascript - プレーンな JavaScript を使用して DOM のある場所から別の場所に要素を移動する方法は?

Question

私はjQueryでそれを行う方法を知っています(テストされていませんが、動作するはずです):

$('#foo').html().appendTo('#bar');
$('#foo').remove();

しかし、プレーンJSでこれを行う方法は?

Answer 1

jQuery コードは、プレーンな JavaScript で次のように実行できます。

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");
bar.innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);

ただし、これは内部の html コードを文字列としてコピーfooし、DOM からbar削除するだけです。foo

次のように、ノードを移動することもできます。

var foo = document.getElementById("foo"),
    bar = document.getElementById("bar");
bar.innerHTML = "";
for (var node in foo.childNodes) {
    bar.appendChild(node);
}
foo.parentNode.removeChild(foo);

これにより、 の実際の子ノードが に移動fooされbar、現在空の が削除されますfoo。

Answer 2

field = document.getElementById('e');
document.getElementById('x').innerHTML = field.parentNode.innerHTML;
field.parentNode.removeChild(field);

これは 1 つの解決策です。clonenodeも検索できます。

Answer 3

要素の作成

   <div id="div1">
     <p id="p1">This is a paragraph.</p>
     <p id="p2">This is another paragraph.</p>
    </div>

    <script>
    var para=document.createElement("p");
     var node=document.createTextNode("This is new.");
    para.appendChild(node);

     var element=document.getElementById("div1");
    element.appendChild(para);
    </script>

要素の削除（親を知っている必要があります）

    <div id="div1">
     <p id="p1">This is a paragraph.</p>
     <p id="p2">This is another paragraph.</p>
    </div>
    <script>
     var parent=document.getElementById("div1");
      var child=document.getElementById("p1");
      parent.removeChild(child);
    </script>

http://www.w3schools.com/js/js_htmldom_elements.aspによって提供されます

Answer 4

最も単純には、次の可能性があります。

var foo = document.getElementById('foo');
document.getElementById('bar').innerHTML = foo.innerHTML;
foo.parentNode.removeChild(foo);

JS フィドルのデモ。

そして、関数を使用して繰り返しを最小限に抑えます。

function moveTo(source,target){
    if (!source || !target) {
        return false;
    }
    else {
        var children = source.childNodes;
        while (children.length){
            target.appendChild(children[0]);
        }
        source.parentNode.removeChild(source);
    }
}

var bar = document.getElementById('bar'),
    foo = document.getElementById('foo');

moveTo(foo, bar);

JS フィドルのデモ。