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

L理查德2020-03-09

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

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

到这个：

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

这样我有：

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

LEYJim2020/03/09 20:18:59

您可以使用纯JavaScript，使用appendChild()方法...

appendChild（）方法将节点追加为节点的最后一个子节点。

提示：如果要创建带有文本的新段落，请记住将文本创建为Text节点，然后将其附加到段落中，然后将该段落附加到文档中。

您也可以使用此方法将一个元素从一个元素移动到另一个元素。

提示：使用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>

神无Tom2020/03/09 20:18:59

您也可以尝试：

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

但这将完全覆盖您拥有的所有内容#destination。

Davaid神无2020/03/09 20:18:59

我注意到之间严重的内存泄露和性能上的差异insertAfter及after或insertBefore＆before..如果你有一大堆的DOM元素，或者你需要使用after()或before()一个内MouseMove事件，浏览器内存可能会增加和明年业务将运行很慢。

我刚刚经历的解决方案是使用inserBefore代替before()，而使用insertAfter after()。

马克2020/03/09 20:18:59

曾经尝试过普通的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>

神奇神无A2020/03/09 20:18:59

您可以使用：

要在之后插入，

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

要插入另一个元素，

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

小哥Stafan2020/03/09 20:18:59

您可能要使用该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>

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer