如何使用appendTo和prependTo將一個DOM元素嵌套在另一個DOM元素中？

移動DOM 元素：如何將一個元素嵌套在另一個元素中

在Web 開發中，經常需要在DOM 結構中移動元素，無論是出於美觀還是功能原因。其中一個要求是將特定的 DIV 元素重新定位到另一個現有的 DIV 元素中。

問題：

假設您有兩個 DIV 元素：「來源」和「目標」。您希望將「source」及其子元素移至「destination」中，使其成為「destination」的巢狀元素。

解決方案：

使用appendTo：

appendTo 函數通常用於在另一個元素的函數通常用於在另一個元素末尾插入一個元素的元素元素。例如：

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

此方法會將「來源」（包括其內容）附加到「目的地」的尾部。

使用 prependTo:

或者，prependTo 函數將一個元素加入另一個元素的開頭。例如：

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

範例：

考慮以下程式碼片段：

<div>

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

當「appendTo」按鈕時按下按鈕後，「moveMeIntoMain」將被附加到「main」的末端。點選“prependTo”按鈕會在“main”的開頭插入“moveMeIntoMain”。

以上是如何使用appendTo和prependTo將一個DOM元素嵌套在另一個DOM元素中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！