web-dev-qa-db-ja.com

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

あるDIV要素を別の要素の中に移動したいと思います。例えば、私はこれを動かしたい（全ての子供を含む）：

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

これに：

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

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

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
javascriptjqueryhtml
1542
Mark Richman

appendTo 関数（これは要素の最後に追加されます）を使用することをお勧めします。

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

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

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

例：

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});
#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

1651
Andrew Hare

私の解決策：

移動：

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

コピー：

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

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

854
Alejandro Illecas

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

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

私は ここ からつかみました。

106
kjc26ster

要素を配置するdivにコンテンツがあり、要素にafterメインコンテンツを表示する場合：

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

要素を配置するdivにコンテンツがあり、要素を表示する場合beforeメインコンテンツ：

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

要素を配置するdivが空の場合、またはreplaceに完全にしたい場合：

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

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

$("#destination").append($("#source").clone());
// etc.
93
itsme

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

フラグメントを宣言する：

var fragment = document.createDocumentFragment();

フラグメントに目的の要素を追加します。

fragment.appendChild(document.getElementById('source'));

フラグメントを目的の要素に追加します。

document.getElementById('destination').appendChild(fragment);

チェックしてみてください。

76
Ali Bassam

あなたが使用することができます：

後に挿入する

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

他の要素の内側に挿入するには、

jQuery("#source").appendTo("#destination");
27
Subrahmanyam

普通の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>

20
Bekim Bacaj

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

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

これは簡単な例です：

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

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

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

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

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

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

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

$('.whatToMove').appendTo('.whereToMove');
17
Dan

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

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

試してみる codepen

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}
#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>

16
Subodh Ghulaxe

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

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

10
HMR

あなたも試してみることができます：

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

しかし、これは#destinationにあるものを完全に上書きします。

5
Tamas

InsertAfter＆afterまたはinsertBefore＆beforeの間で、メモリリークとパフォーマンスの大きな違いがあることに気付きました。もしDOM要素が大量にある場合、またはMouseMoveイベント内でafter（）またはbefore（）を使用する必要がある場合次の操作は本当に遅くなります。私が今経験した解決策は、before（）の代わりにinserBeforeを使用し、after（）の代わりにinsertAfterを使用することです。

4
spetsnaz

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

$("#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>を正しくラップしますが、<label>...</label>をいくらか残します。そのため、代わりに明示的な$("row1").append("#a_predefined_fieldset")を使いました。そう、YMMV。

0
RayLuo

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
Alireza