logo标签列表

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

javascriptjquery
14
这有什么问题吗？这个语句只是将container2的内容复制到container1中。如果你需要移动内容，你需要再添加一个语句来清空container2，例如：$('#container2').empty(); - Mujtaba Hassan
7个回答
14

请参见 jsfiddle http://jsfiddle.net/Tu7Nc/1/

您需要使用JQuery的 html() 函数附加您的div内容（内部HTML），而非仅附加您的 div。

HTML:

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

jQuery：

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

结果：

aaabbb
bbb
26
这是复制，而非移动。 - Esger
5
请注意，从DOM到HTML再到DOM的转换会产生一些后果，例如丢失对元素的引用和删除监听器。这可能是预期的或者不可避免的，也可能是不期望的或者不必要的。 - RobG
14

最好不要使用html()。

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

请改用contents，这样您的其他脚本就不会因为损坏的引用而中断。

我需要将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>

[编辑]

之前的示例可以工作，但以下是更简洁和更高效的示例：

<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>
谢谢，我尝试使用html()嵌套时没有成功，但这个方法可以。干杯！ - bawpie
12
使用 jQuery 将 div (id=container2) 的内容移动到另一个 div (id=container1)。
$('#container2').contents().appendTo('#container1');
6
您可以尝试以下操作：

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的解决方案会剥离这些监听器。
@Zoltar—发现得好。;-) 对于那些搜索问题但不想要jQuery答案的人来说，这很有帮助。无论如何，我现在看到OP想要复制内容，而不仅仅是附加元素本身，所以我会修复它。 - RobG
1
我非常欣赏这个纯JavaScript的解决方案。 - rickatech
1

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

0

如果你想要追加内容，这个也可以作为一种替代方案：

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

如果你想要重写内容：

document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML
0
我建议使用一个函数和jQuery来实现一个通用的方法：
function MoveContent(destId, srcId) {

    $('#' + destId).append($('#' + srcId).contents().detach());
}

使用以下调用将分离的源节点内容附加到目标节点：

MoveContent('dest','src');

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

请参见示例：http://jsfiddle.net/dukrjzne/3/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接