0

假设我<div>在 DOM 中有两个元素。我可以使用 jQuery 在它们之间轻松切换它们的标记，如下所示：

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，则输入中包含的值将丢失。

4

2 回答 2

2

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

试试这个：

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

$('#el1').append(children2);
$('#el2').append(children1);
于 2012-12-24T03:57:59.810 回答
0

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-24T03:53:29.293 回答