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

2020/09/15 18:01 · javascript ·  · 0评论

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

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

到这个:

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

这样我有:

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

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

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

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

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

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

例:

我的解决方案:

移动:

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

复制:

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

注意.detach()的用法。复制时,请注意不要复制ID。

我只是用过:

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

我从这里抓起的

那么JavaScript解决方案呢?

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

看看这个。

如果div要放置元素的位置中包含内容,并且您希望该元素显示主要内容之后:

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

如果div要放置元素的位置中包含内容,并且您希望在主要内容之前显示该元素

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

如果div要放置元素的位置为空,或者要完全替换它:

$("#element").html('<div id="source">...</div>');

如果要在上述任何一项之前复制元素:

$("#destination").append($("#source").clone());
// etc.

您可以使用:

要在之后插入,

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

要插入另一个元素,

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

如果您需要快速演示,以及有关如何移动元素的更多详细信息,请尝试以下链接:

http://html-tuts.com/move-div-in-another-div-with-jquery


这是一个简短的示例:

要在元素上方移动:

$('.whatToMove').insertBefore('.whereToMove');

要在元素之后移动:

$('.whatToMove').insertAfter('.whereToMove');

要在元素内部移动,请在该容器内的所有元素上方:

$('.whatToMove').prependTo('.whereToMove');

要在元素内部移动,请在该容器内的所有元素之后:

$('.whatToMove').appendTo('.whereToMove');

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

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

尝试工作Codepen

这是个老问题,但是因为我需要将内容从一个容器移到另一个容器,包括所有事件监听器

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并将其放入目标(包括事件侦听器)中:https : //developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

您也可以尝试:

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

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

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

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

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

为了完整起见,还有另一种方法wrap()wrapAll()中提到的这篇文章因此,OP的问题可能会由此解决(也就是说,假设<div id="destination" />尚不存在,以下方法将从头开始创建这样的包装器-OP尚不清楚包装器是否已经存在):

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

听起来很有希望。但是,当我尝试$("[id^=row]").wrapAll("<fieldset></fieldset>")对多个嵌套结构执行以下操作时:

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

它正确地包装了那些<div>...</div><input>...</input>但是略去了<label>...</label>所以我最终$("row1").append("#a_predefined_fieldset")改为使用显式因此,YMMV。

Bekim Bacaj的脏尺寸改善答案

div { border: 1px solid ; margin: 5px }
<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>
本文地址:http://javascript.askforanswer.com/ruhejiangyigeyuansuyidongdaolingyigeyuansu.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!