在DOM中切换HTML元素而不复制HTML

假设我在DOM中有两个<div>元素。我可以很容易地用jQuery切换其标记之间，就像这样：在DOM中切换HTML元素而不复制HTML

function switch_html(el1, el2){ 
     var el1_content = el1.html(); 
     var el2_content = el2.html(); 
     el1.html(el2_content); 
     el2.html(el1_content); 
}

然而，实际上，我怎么切换DOM元素，而不仅仅是复制&开关HTML源代码？例如，在我正在开发的应用程序中，我正在交换<div>的内容，其中包括填写<input>的字段。如果仅复制这些字段的源HTML，则输入中包含的值将丢失。

来源

2012-12-24 element119

jquery.replaceWith（）。克隆一个节点。将第二个替换为第一个，然后将第二个克隆插入到第一个。应该克隆实际的DOM东西，而不仅仅是源，保留任何字段值。 –

看看[这个答案]（http://stackoverflow.com/questions/8034918/jquery-switch-elements-in-dom） –

@MarcB像这样：'var el3 = el1.clone（）; el1。 replaceWith（EL2）; el2.replaceWith（EL3）;'？这似乎只是删除第一个元素。 – element119

您可以使用jQuery append/element.appendChild移动实际的DOM节点。移动实际的DOM节点，不要尝试复制/克隆。

试试这个：

var children1 = $('#el1').children(); 
var children2 = $('#el2').children(); 

$('#el1').append(children2); 
$('#el2').append(children1);

来源

2012-12-24 03:57:59 Jack

太棒了，效果很棒！ – element119

javascript有一个cloneNode（）函数，它在传递true时执行“深度”克隆。

所以：

function switch_html(el1, el2){ 
     var el1Clone = el1.cloneNode(true); 
     var el2Clone = el2.cloneNode(true); 
     el2.replaceNode(el1Clone); 
     el1.replaceNode(el2Clone); 
}

为公（略）更高性能的解决方案：

function switch_html(el1, el2){ 
     var el2Clone = el2.cloneNode(true); 
     el2.replaceNode(el1); 
     el1.replaceNode(el2Clone); 
}

请注意，这里的前提是你要做到这一点原始的JavaScript，即：无jQuery

来源

2012-12-24 03:53:29

在DOM中切换HTML元素而不复制HTML

回答

相关问题