web-dev-qa-db-ja.com

プロトタイプを使用して、あるdiv内から別のdivにdivを移動しますか？

プロトタイプまたはブラウザ間互換の通常のJavaScriptでは、divのコンテンツを別のdivのコンテンツに移動するにはどうすればよいですか？

Divの内部には、IDとイベントオブザーバーを含む依存Javascriptコードを含むフォームがあります。 DOMでブロックを移動したからといって、これが壊れるのを望まない。 'this innerHTML = that innerHTML'ソリューションは、私が探しているものではありません。 DOMが読み込まれるときにも、これを行う必要があります。

私はこれから行きたいです：

<div id='here'>
    <div id='MacGuffin'>
    <p>Hello Worlds!</p>
    </div>
</div>
<div id='there'>
</div>

これに：

<div id='here'>
</div>
<div id='there'>
    <div id='MacGuffin'>
    <p>Hello Worlds!</p>
    </div>
</div>

...何もジャンプせずにドキュメントが読み込まれたとき。

javascriptprototypejs
13
ʍǝɥʇɐɯ

これはBODYタグの最後に追加できます。

<script>
  document.getElementById('there').appendChild(
    document.getElementById('MacGuffin')
  );
</script>

MacGuffinは自動的に一方から他方へ移動されます。
そしてちらつきはありません。

58
Mic

おそらく重要な点ではないかもしれませんが、Node.migrateChild（）組み込みのJavaScriptインターフェースメソッドはありません。フラグメントがDOMの別の場所にすでに親を持っている場合（上記のマークアップの例ではdiv id = 'MacGuffin'と同じ）、appendChild（）は引数フラグメントを現在の親から静かに切り離してから、新しい親の下に再接続します。私の考えでは、migrateChild（）は、appendChild（）より意味的に意味のあるメソッド名になり、StackOverflow開発者の検索でそのより強力な機能をほのめかす必要が少なくなります。

3
rickatech

hereのcontentsをthereに移動するには、基本的に次のようにします。

$('there').insert($('here').childNodes);

悲しいことに、それはうまくいきません。

他の2つの回答と同様に、document.getElementByIdの省略形のみを提供するプロトタイプを使用してプレーンなJavaScriptに頼らなければならないようです。

var frag = document.createDocumentFragment();
for (var c = $('nav').firstChild, n; c; c = n) {
    n = c.nextSibling;
    frag.appendChild(c);
}
$('header').appendChild(frag);

（DocumentFragmentsのパフォーマンス統計については、John Resignのブログを参照してください： http://ejohn.org/blog/dom-documentfragments/ ）

1
searlea

hereの-​​contentsをthereに移動するには、hereが<div>：

$('there').insert($('here').descendants()[0]);

descendants（）は配列を返し、挿入はコンテンツを取得するため、最初の要素を使用します。

1
Jim C