appendTo と prependTo を使用して 1 つの DOM 要素を別の DOM 要素内にネストする方法

DOM 要素の移動: ある要素を別の要素内にネストする方法

Web 開発では、DOM 構造内で要素を移動することが必要になることがよくあります。 、美的理由であろうと機能的理由であろうと。そのような要件の 1 つは、特定の DIV 要素を別の既存の DIV 要素に再配置することです。

問題:

「ソース」と「宛先」という 2 つの DIV 要素があるとします。 「source」とその子要素を「destination」に移動して、「destination」のネストされた要素になるようにしたいと考えています。

解決策:

appendTo の使用:

appendTo 関数は、最後に要素を挿入するためによく使用されます。別の要素の。例:

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

このメソッドは、「source」(その内容を含む) を「destination」の末尾に追加します。

Using prependTo:

あるいは、prependTo 関数は、要素を別の要素の先頭に追加します。例:

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

例:

次のコード スニペットを考えてみましょう:

<div>
<pre class="brush:php;toolbar:false">$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

「appendTo」ボタンを押すと、「main」の末尾に「moveMeIntoMain」が追加されます。 「prependTo」ボタンをクリックすると、「main」の先頭に「moveMeIntoMain」が挿入されます。