如何将一个元素移动到另一个元素中？

javascript jquery html

2022-08-29 21:56:06

我想将一个 DIV 元素移动到另一个 DIV 元素中。例如，我想移动这个（包括所有孩子）：

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

进入这个：

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

所以我有这个：

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

答案 1

您可能希望使用 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>

答案 2

我的解决方案：

移动：

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

复制：

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

请注意 .detach（）的用法。复制时，请注意不要重复 ID。