要素を別の要素に移動する方法は？

1689

DIV要素を別の要素内に移動したいと思います。たとえば、これを移動したい（すべての子を含む）：

<div id="source">
...
</div>

これに：

<div id="destination">
...
</div>

私がこれを持っているように：

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
javascript  jquery  html 
— マーク・リッチマン
ソース
21
$（target_element）.append（to_be_inserted_element）;を使用するだけです。
— Mohammad Areeb Siddiqui 2013
2
または：単純なJavaScriptを使用したdestination.appendChild（source）
— luke
CSSを使用してこれを実現できますか？それは可能ですか？
— RajKumarサマラ2017年
6
@RajKumarSamala CSSはHTMLの構造を変更することはできず、そのプレゼンテーションのみを変更できます。
— マークリッチマン2017年

回答:

39

単純なJavaScriptを試したことはありますdestination.appendChild(source);か？

onclick = function(){ destination.appendChild(source); }
div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }
<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>
スニペットを展開

— ベキム・バカジ
ソース
*誰かがデモスニペットのグローバルイベント onclickの前にキーワードvarを付けて投稿を強化しようとしましたが、それは誤りです。
— Bekim Bacaj 2017
6
jQueryがJavaScriptに等しいと人々が考えているのは驚くべきことです。2017年には、jQueryはもう必要ありません。
— nkkollaw 2017
2
2017年にはjqueryの必要はありませんが、すべてのプロジェクトで何度も何度も繰り返しているタスクに、より軽量で類似したものを使用すると役立つ場合があります。クロスブラウザー対応の方法でdocument.ready、window.loadイベントをリッスンする簡単な方法として、キャッシュドムを使用します。かんたん。
— eballeste
1
これを承認された回答に変更します。2020年です:)
— マークリッチマン
1
jQueryがJavaScriptに等しいと人々が考えているのは驚くべきことです。2020年にはjQueryはもう必要ありません。
— ii iml0sto1
1794

appendTo（要素の最後に追加する）関数を使用することができます。

$("#source").appendTo("#destination");

または、次のprependTo関数を使用することもできます（要素の先頭に追加されます）。

$("#source").prependTo("#destination");

例：

コードスニペットを表示

— アンドリューヘア
ソース
23
代わりに要素の別のコピーが作成される可能性があるため、jQueryモバイルではこれが正しく機能しない可能性があるという警告
— ジョーダンライター
32
appenToはコピーを作成するか、実際にdiv全体を宛先に移動しますか？（コピーすると、divをIDで呼び出すときにエラーが発生するため）
50
jQueryでの要素の削除、置換、移動に関する優れた記事を以下に示し
— articles
42
appendToのjQueryドキュメントには、要素が移動されたと記載されています。it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned- api.jquery.com/appendto
— John K
15
移動するのではなく、追加するだけです。以下の答えは適切なMOVEを行います。
— アーロン
913

私の解決策：

移動：

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

コピー：

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

.detach（）の使い方に注意してください。コピーするときは、IDを複製しないように注意してください。

— アレハンドロ・イルカス
ソース
86
ベストアンサー。受け入れられた回答はコピーを作成し、質問が要求するように要素を移動しません。
— paulscode 2013
97
申し訳ありませんが、Andrew Hareの回答は正解です。デタッチは不要です。上記のPixicのJSFiddleで試してみてください-detach呼び出しを削除すると、まったく同じように機能します。つまり、コピーではなく移動を行います。 これが、1つの変更だけのフォークです：jsfiddle.net/D46y5 APIに記載されているように：api.jquery.com/appendTo： "この方法で選択された要素がDOMの他の場所の単一の場所に挿入されると、要素は移動されますターゲット（クローンではない）に挿入され、挿入された要素で構成される新しいセットが返されます。 "
— John-Not A Number
8
@ John-NotANumberは正しい-ここではdetach（）は必要ありません。受け入れられた答えは最高です、あなたは実際にドキュメントを正しく読む必要があるだけです。
— LeonardChallis
11
appendToのドキュメントには、「ただし、複数のターゲット要素がある場合、最初の後に、挿入された要素の複製されたコピーが各ターゲットに対して作成され、その新しいセット（元の要素とクローン）が返されます。」一般的なケースでは、このソリューションはコピーを作成することもできます！
— Vincent Pazeller、2015
すごい！または、これを使用して移動先をより具体的にすることができます$('#nodeToMove').insertAfter('#insertAfterThisElement');
— Victor Augusto
108

私はちょうど使用しました：

$('#source').prependTo('#destination');

ここからつかみます。

— kjc26ster
ソース
7
まあ、デタッチは要素を保持して後で再挿入したいときに便利ですが、この例ではとにかく即座に再挿入します。
— TimBüthe12年
1
私はあなたが得ているものをかなり理解していません、サンプルコードを提供できますか？
— kjc26ster
1
つまり、prependToは、要素を元の位置から切り離し、新しい位置に挿入します。一方、detach関数は、選択した要素を切り離すだけで、変数に保存して、後でDOMに挿入できます。事は、あなたの分離呼び出しは不要です。それを削除すると、同じ効果が得られます。
— TimBüthe12年
1
編集によってこの回答が完全に変更され、1年後に別の回答が追加され（元の回答と同じ）、800以上の賛成票が得られたのは驚くべきことです
— 。– hlscalon
96

JavaScriptソリューションについてはどうですか？

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

見てみな。

— アリ・バッサム
ソース
8
単にdocument.getElementById（ 'destination'）。appendChild（document.getElementById（ 'source'）））の代わりにcreateDocumentFragmentを使用する理由
— Gunar Gessner、2016
6
@ GunarC.Gessnerは、宛先オブジェクトに追加する前にソースオブジェクトを変更する必要があると想定し、仮想オブジェクトであり、DOMツリーの一部ではないフラグメントを使用することをお勧めします。変更すると、パフォーマンスが向上します。追加する前に最初の場所で変更するのではなく、元の場所（現在はフラグメント内にあります）から遷移したときのソースオブジェクト。
— Ali Bassam 2016
5
JavaScriptの純粋なソリューションを提供することの関連性を追加したいと思います。jQueryが常に使用されているとは限りません
— Alexander Fradiani '10
1
質問：子ノードを追加すると、添付されたイベントが失われますか？
— jimasun 2016年
1
私自身の質問への答えはイエスです、それは添付されたイベントを保持します。
— jimasun 2016年
95

場合はdiv、あなたの要素を配置する場所、コンテンツの内部を持っており、あなたは要素を表示させたい後メインコンテンツ：

  $("#destination").append($("#source"));

場合はdiv、あなたの要素を配置する場所、コンテンツの内部を持って、あなたは要素を表示する前に、主な内容：

$("#destination").prepend($("#source"));

場合はdiv、あなたの要素を配置する場所は空である、またはあなたがしたい置き換えるそれを完全に：

$("#element").html('<div id="source">...</div>');

上記のいずれかの前に要素を複製する場合：

$("#destination").append($("#source").clone());
// etc.
— sbaaaang
ソース
私はすべての太字を少し読みにくいと感じていますが、これは最も有益な回答です。
— Michael Scheper 2014年
32

以下を使用できます。

後に挿入するには、

jQuery("#source").insertAfter("#destination");

別の要素内に挿入するには、

jQuery("#source").appendTo("#destination");
— スブラマニャム
ソース
20

簡単なデモと要素の移動方法の詳細が必要な場合は、次のリンクを試してください。

http://html-tuts.com/move-div-in-another-div-with-jquery

以下に短い例を示します。

要素の上に移動するには：

$('.whatToMove').insertBefore('.whereToMove');

要素の後に移動するには：

$('.whatToMove').insertAfter('.whereToMove');

要素内に移動するには、そのコンテナ内のすべての要素の上に移動します。

$('.whatToMove').prependTo('.whereToMove');

要素内に移動するには、そのコンテナ内のすべての要素の後：

$('.whatToMove').appendTo('.whereToMove');
— ダン
ソース
19

次のコードを使用して、ソースを宛先に移動できます 

 jQuery("#source")
       .detach()
       .appendTo('#destination');

コードペンを試してみてください

コードスニペットを表示

— スボド・グラクセ
ソース
11

古い質問ですが、すべてのイベントリスナーを含むコンテナ間でコンテンツを移動する必要があるため、ここに来ました。

jQueryにはその方法はありませんが、標準のDOM関数appendChildにはあります。

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

appendChildを使用すると、.sourceが削除され、そのイベントリスナーを含むターゲットに配置されます。https：//developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

— HMR
ソース
6

あなたも試すことができます：

$("#destination").html($("#source"))

しかし、これはあなたが持っているものを完全に上書きします#destination。

— タマス
ソース
2
移動した要素のイベントリスナーを中断します。
— Igor Pomaranskiy
4

私は間の巨大なメモリリークとパフォーマンスの違いに気づいinsertAfter＆afterまたはinsertBefore＆before..あなたは、DOM要素のトンを持っている、またはあなたが使用する必要がある場合after()やbefore()内部のMouseMoveイベントを、ブラウザのメモリは、おそらく増加し、次の操作が本当に遅い実行されます。

私が今経験した解決策は、代わりbefore()にinserBefore を使用し、代わりにinsertAfter を使用することafter()です。

— スペツナズ
ソース
これは、JavaScriptエンジンの実装に依存する問題のように聞こえます。どのブラウザーバージョンとJSエンジンでこれを確認できますか？
— マークリッチマン2014
1
Chromeバージョン36.0.1985.125を使用していて、jQuery v1.11.1を使用しています。単純なDIVをマウスが上にある要素の上または下に移動するmousemoveイベントで関数をバインドします。したがって、カーソルをドラッグしている間、このイベントと関数が実行されます。メモリリークは、カーソルを30秒以上移動すると、after（）およびbefore（）で発生し、代わりにinsertAfter＆insertBeforeを使用しただけでメモリリークは消えます。
— spetsnaz 2014
1
そのバグについては、Googleでバグを公開します。
— マークリッチマン
2

appendChild()メソッドを使用して純粋なJavaScriptを使用できます...

appendChild（）メソッドは、ノードをノードの最後の子として追加します。

ヒント：テキスト付きの新しい段落を作成する場合は、テキストを段落に追加するテキストノードとして作成し、その段落をドキュメントに追加してください。

このメソッドを使用して、要素をある要素から別の要素に移動することもできます。

ヒント：指定された既存の子ノードの前に新しい子ノードを挿入するには、insertBefore（）メソッドを使用します。

だからあなたは仕事をするためにそれを行うことができます、これは私があなたのために作成したもので、を使用appendChild()して実行し、あなたのケースでどのように機能するかを確認します：

function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}
#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}
<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

<button onclick="appendIt()">Move Element</button>
スニペットを展開

— アリレザ
ソース
0

完全を期すために、この記事では別のアプローチwrap()またはwrapAll()言及があります。したがって、OPの質問はこれで解決できる可能性があります（つまり、<div id="destination" />まだ存在しないと仮定すると、次のアプローチではそのようなラッパーが最初から作成されます-OPはラッパーがすでに存在するかどうかについて明確ではありませんでした）。

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

それは有望に聞こえます。ただし、次の$("[id^=row]").wrapAll("<fieldset></fieldset>")ように複数のネストされた構造で実行しようとしたとき：

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

それはそれら<div>...</div>を正しくラップしますが、<input>...</input>SOMEHOWはを除外し<label>...</label>ます。そのため、$("row1").append("#a_predefined_fieldset")代わりに明示的に使用することになりました。だから、YMMV。

— RayLuo
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.