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

假设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源代码？例如，在我当前开发的应用程序中，我正在交换包含已填写的

字段的

内容。如果仅复制这些字段的源HTML，则输入中包含的值将丢失。

javascript有一个cloneNode（）函数，当传递true时，该函数将执行“深度”克隆

因此：

或者，对于（稍微）更高性能的解决方案：

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

---

请注意，这里的假设是您希望在原始JavaScript中执行此操作，即：无jQuery

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

试试这个：

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

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

---

jquery.replaceWith（）。克隆一个节点。将第二个替换为第一个，然后将克隆插入第二个所在的位置。这应该克隆实际的DOM内容，而不仅仅是源代码，保留任何字段值；el1.替换为（el2）；el2.替换为（el3）？这似乎只是删除了第一个元素。

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

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