使用jQuery将DIV的内容移动到另一个DIV
Moving the content of a DIV to another DIV with jQuery
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/
- 通过DRAGGABLE将一个DIV移动到另一个DIF下?(CSS,JQuery)
- 将插入符号位置移动到ContentEditable<DIV>
- 如何在剪切/粘贴/移动后在contentEditable DIV中保留与XML相关的数据
- 从移动视图中删除 Div
- 在不移动DOM的情况下最大化Div
- jQuery 悬停/单击事件位于同一 DIV(移动设备)上
- 使用 JavaScript 鼠标事件拖动 DIV 会快速移动
- 如何使“按钮”在鼠标按下时创建一个可移动的 DIV,并将“鼠标按下”切换到新的 DIV
- 通过拖动移动动态创建的 DIV
- 在 IE8 中将 DIV 从光标下方移动时,悬停样式保持不变
- jQuery:当 DIV 的子元素靠近其父元素的右边缘时,将 DIV 向左移动(自动滚动类型)
- jQuery Animate - 以固定速度将 DIV 移动到 X、Y 位置
- 如何在jquery(移动)中刷新DIV
- 使用单选按钮使 Div 在页面上随机移动
- 如何让 Div 使用单选按钮随机移动
- 位置:修复了在iPhone上打开“选择”元素时DIV移动的问题
- 将一些 JSON 数据移动到唯一的 Div 中
- 用JavaScript将DIV移动到BODY's限制内
- DIV悬停使另一个DIV移动
- HTML Div移动文本到下一行