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

Question

假设我有两个 <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，则输入中包含的值将会丢失。

Answer 1

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

试试这个:

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

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