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

回答(13)

2 years ago

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

}

main

move me to main

appendTo main

prependTo main

2 years ago

老问题但是到了这里因为我需要将内容从一个容器移动到另一个容器 including all the event listeners .

jQuery没有办法做到这一点，但标准的DOM函数appendChild .

//assuming only one .source and one .target

$('.source').on('click',function(){console.log('I am clicked');});

$('.target')[0].appendChild($('.source')[0]);

2 years ago

您也可以尝试：

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

但这将完全覆盖 #destination 中的任何内容 .

2 years ago

您可以使用：

要插入之后，

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

要插入另一个元素，

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

2 years ago

我的解决方案

移动：

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

复制：

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

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

2 years ago

JavaScript 解决方案怎么样？

声明一个片段：

var fragment = document.createDocumentFragment();

将所需元素附加到片段：

fragment.appendChild(document.getElementById('source'));

将片段附加到所需元素：

document.getElementById('destination').appendChild(fragment);

Check it out.

2 years ago

我刚用过：

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

我从here抓起 .

2 years ago

如果要放置元素的 div 中包含内容，并且您希望元素显示在主要内容之后：

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

如果要放置元素的 div 里面有内容，并且想要在主要内容之前显示元素：

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

如果要放置元素的 div 为空，或者您想要完全替换它：

$("#element").html('

...

');

如果要在上述任何一个之前复制元素：

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

// etc.

2 years ago

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

jQuery("#source")

.detach()

.appendTo('#destination');

function move() {

jQuery("#source")

.detach()

.appendTo('#destination');

}

#source{

background-color:red;

color: #ffffff;

display:inline-block;

padding:35px;

}

#destination{

background-color:blue;

color: #ffffff;

display:inline-block;

padding:50px;

}

I am source

I am destination

Move

2 years ago

曾经尝试过普通的JavaScript ...... destination.appendChild(source); ？

onclick = function(){ destination.appendChild(source); }

div{ margin: .1em; }

#destination{ border: solid 1px red; }

#source {border: solid 1px gray; }

###

***

2 years ago

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

Here is a short example:

要移动一个元素：

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

要移动一个元素：

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

要在元素内移动，请在该容器内ABOVE ALL元素：

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

要在元素内移动，请在该容器内的所有元素之后：

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

2 years ago

我注意到insertAfter＆after或insertBefore＆before之间存在巨大的内存泄漏和性能差异 . 如果你有大量的DOM元素，或者你需要在MouseMove事件中使用after()或before()，浏览器内存可能会增加接下来的操作将会非常缓慢 . 我刚刚遇到的解决方案是使用inserBefore而不是()和insertAfter而不是() .

2 years ago

为了完整起见，this article中提到了另一种方法 wrap() 或 wrapAll() . 因此OP的问题可能由此解决(也就是说，假设

$("#source").wrap('

// or

$(".source").wrapAll('

听起来很有希望 . 但是，当我尝试在多个嵌套结构上执行 $("[id^=row]").wrapAll("

") 时，如下所示：

Name

它正确地包裹了那些

...

和 ... 但是一些东西离开了 ... . 所以我最终使用了显式的 $("row1").append("#a_predefined_fieldset") . 所以，YMMV .