http://www.frostjedi.com/terra/scripts/demo/jquery02.html
根据this link元素可以通过执行$('#container1')。append($('#container2'))来移动。不幸的是,它似乎对我不起作用。有什么想法吗?
答案 0 :(得分:11)
最好不要使用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>
<强> [编辑] 强>
上一个示例有效,但这里有一个更清洁,更有效的例子:
<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>
答案 1 :(得分:10)
请参阅jsfiddle http://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
答案 2 :(得分:10)
使用jquery将div的内容(id = container2)移动到另一个div(id = container1)。
$('#container2').contents().appendTo('#container1');
答案 3 :(得分: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的解决方案将被剥夺。
答案 4 :(得分:1)
$('#container1').append($('#container2').html())
答案 5 :(得分:0)
嗯,如果您想要附加:
,这个可能是另一种选择document.getElementById("div2").innerHTML=document.getElementById("div2").innerHTML+document.getElementById("div1").innerHTML
如果你想重写内容:
document.getElementById("div2").innerHTML=document.getElementById("div1").innerHTML
答案 6 :(得分:0)
我建议使用函数和jQuery的一般方法:
function MoveContent(destId, srcId) {
$('#' + destId).append($('#' + srcId).contents().detach());
}
分离的源节点的内容通过调用附加到目标节点:
MoveContent('dest','src');
第一个参数是新父节点(目标)的id,第二个参数是旧父节点(源)的id。
上的示例