我想将一个DIV元素移动到另一个元素中。例如,我想移动此(包括所有子对象):

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

在这方面:

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

所以我有这个:

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

当前回答

您可以使用:

为了在后面插入,

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

为了插入另一元件内部,

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

其他回答

appendChild正是这样做的——基本上是剪切粘贴。

它将移动选定的元素及其所有子节点。

您可能需要使用appendTo函数(它将添加到元素的末尾):

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

或者,您可以使用prependTo函数(添加到元素的开头):

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

例子:

$(“#appendTo”).click(function(){$(“#moveMeIntoMain”).appendTo($(“#main”));});$(“#prependTo”).click(function(){$(“#moveMeIntoMain”).prependTo($(“#main”));});#主要的,主要的{边框:2px纯蓝色;最小高度:100px;}.moveMeIntoMain{边框:1px纯红色;}<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”>将我移动到main</div><button id=“appendTo”>appendTo main</button><button id=“prependTo”>prependTo main</button>

Bekim Bacaj回答的肮脏尺寸改进:

div{border:1px实心;margin:5px}<div id=“source”onclick=“destination.appendChild(this)”>单击我</div><div id=“destination”></分区>

您可以使用:

为了在后面插入,

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

为了插入另一元件内部,

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

您可以使用纯JavaScript,使用appendChild()方法。。。

appendChild()方法将节点附加为节点的最后一个子节点。提示:如果你想用文本创建一个新段落,请记住将文本创建为附加到段落的文本节点,然后将段落附加到文档中。也可以使用此方法将元素从一个元素移动到另一个提示:使用insertBefore()方法在指定的、现有的、子节点。

所以你可以这样做来完成这项工作,这是我为你创建的,使用appendChild(),运行并查看它如何适用于你的案例:

函数appendIt(){var source=document.getElementById(“源”);document.getElementById(“目标”).appendChild(源);}#来源{颜色:白色;背景:绿色;填充:4px 8px;}#目的地{颜色:白色;背景:红色;填充:4px 8px;}按钮{页边空白:20px;}<div id=“source”><p>来源</p></div><div id=“destination”><p>目的地</p></div><button onclick=“appendIt()”>移动元素</button>