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

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

在这方面:

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

所以我有这个:

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

当前回答

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

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

其他回答

您可以使用以下代码将源移动到目标:

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

尝试使用CodePen。

函数move(){jQuery(“#source”).detch().appendTo(“#destination”);}#来源{背景色:红色;颜色:#ffffff;显示:内联块;填充:35px;}#目的地{背景色:蓝色;颜色:#ffffff;显示:内联块;填充:50px;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“source”>我是消息源</div><div id=“destination”>我是目的地</div><button onclick=“move();”>移动</button>

我刚刚使用了:

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

我从这里抓起的。

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

我需要将内容从一个容器移动到另一个容器,包括所有事件侦听器。jQuery没有实现它的方法,但标准的DOM函数appendChild可以实现。

// Assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

使用appendChild删除.source*并将其放入目标,包括其事件侦听器:Node.appendChild()(MDN)

尝试纯JavaScript:destination.appendChild(源代码);。

onclick=function(){destination.appendChild(源)};第二部分{边距:.1em;}#目的地{边框:实心1px红色;}#来源{边框:实心1px灰色;}<div id=destination>###</div><div id=源>***</div>