使用jQuery将DIV的内容移动到另一个DIV

Moving the content of a DIV to another DIV with jQuery

本文关键字：DIV 移动 另一个 jQuery 使用      更新时间：2023-09-26

http://www.frostjedi.com/terra/scripts/demo/jquery02.html

根据这个链接元素可以通过执行$（'#container1'）.append（$（'#container2'）来移动。不幸的是，它似乎对我不起作用。有什么想法吗？

请参阅jsfiddlehttp://jsfiddle.net/Tu7Nc/1/

您必须使用Jquery的html()函数，而不是精确地附加div，而是附加div的内容（内部HTML）。

HTML:

<div id="1">aaa</div>
<div id="2">bbb</div>​

Jquery：

$("#1").append($("#2").html());

结果：

aaabbb
bbb

最好不要使用html()。

由于html将内容解释为字符串而不是DOM节点，我遇到了一些问题。

请改用内容，您的其他脚本不应因引用中断而中断。

我需要将DIV的内容嵌套到它自己的子对象中，以下是我的操作方法。

示例：

<div id="xy">
  <span>contents</span>
</div>
<script>
  contents = $("#xy").contents(); //reference the contents of id xy
  $("#xy").append('<div class="test-class" />'); //create div with class test-class inside id xy 
  $("#xy").find(">.test-class").append(contents); //find direct child of xy with class test-class and move contents to new div
</script>

[EDIT]

前面的例子有效，但这里有一个更干净、更高效的例子：

<script>
    var content = $("#xy").contents(); //find element
    var wrapper = $('<div style="border: 1px solid #000;"/>'); //create wrapper element
    content.after(wrapper); //insert wrapper after found element
    wrapper.append(content); //move element into wrapper
</script>

使用jquery将一个div（id=container2）的内容移动到另一个div。

$('#container2').contents().appendTo('#container1');

您还可以执行：

var el1 = document.getElementById('container1');
var el2 = document.getElementById('container2');
if (el1 && el2) el1.appendChild(el2);

或者作为一种说法，但不是那么稳健：

document.getElementById('container1').appendChild(document.getElementById('container2'));

编辑

经过思考（几年后…），其意图似乎是将一个div的内容移动到另一个div。因此，以下内容在普通JS中做到了这一点：

var el1 = document.getElementById('container1');
var el2 = document.getElementById('container2');
if (el1 && el2) {
  while (el2.firstChild) el1.appendChild(el2.firstChild);
}
// Remove el2 if required
el2.parentNode.removeChild(el2);

这样做的好处是在el2的子代上保留任何动态添加的侦听器，而使用innerHTML的解决方案将删除这些侦听器。

$('#container1').append($('#container2').html())

好吧，如果你想附加：，这个可能是一个替代方案

document.getElementById("div2").innerHTML=document.getElementById("div2").innerHTML+document.getElementById("div1").innerHTML

如果你想重写内容：

document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML

我建议使用一个函数和jQuery的通用方法：

function MoveContent(destId, srcId) {
    $('#' + destId).append($('#' + srcId).contents().detach());
}

分离的源节点的内容通过调用附加到目标节点：

MoveContent('dest','src');

第一个参数是新父节点（目标）的id，第二个参数是旧父节点（源）的id。

请参阅以下示例：http://jsfiddle.net/dukrjzne/3/

相关文章：