...到这个：..."> ...到这个：..."/> ...到这个：..."> ...到这个：...">

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

JavaScript

L理查德

2020-03-09

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

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

到这个：

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

这样我有：

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

第239篇《如何将一个元素移动到另一个元素？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
LEYJim 2020.03.09

您可以使用纯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>

神无Tom 2020.03.09

您也可以尝试：

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

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

Davaid神无 2020.03.09

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

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

马克 2020.03.09

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

神奇神无A 2020.03.09

您可以使用：

要在之后插入，

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

要插入另一个元素，

jQuery("#source").appendTo("#destination");
小哥Stafan 2020.03.09

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android