克隆元素但不包括子元素

Question

有没有办法复制一个元素但不复制它的子元素？

我的目标是复制一个表格，并且包括所有类、内联样式等，但是我不想复制表格元素的任何子元素。

我知道可以复制整个表格，然后从复制品中删除子元素。但是我想要尽量减少屏幕闪烁，而且在DOM中可见之前操作元素可能会有问题。

有什么建议吗？

- Jonathan Wood

---

克隆整个表格，清空它，然后再将其添加到DOM中不应该导致任何闪烁。您能重现闪烁问题吗？ - techfoobar

你可以克隆元素，删除其子元素，然后将其添加到DOM中...但是如果你先克隆，再添加到DOM中，然后再删除子元素，可能会导致一些问题（至少在性能方面可能会有影响）。 - Arun P Johny

@techfoobar：这可能是一个非常大的表格。我肯定会至少引起延迟。我愿意尝试闪烁，但回想起来，当我试图操作尚未可见的元素时遇到了问题。您会在删除不需要的子项时使克隆的表格可见吗？ - Jonathan Wood

@JonathanWood：你可以像操作文档中的元素一样操作“断开连接”的节点。唯一的区别是当你尝试获取仅在元素作为文档一部分时才有意义的信息（如其在屏幕坐标系中的位置）时，就会出现差异。大多数DOM操作方法的工作方式都是相同的。 - Felix Kling

Answer 1

您考虑过使用本地cloneNode吗？此参数控制是否应该同时克隆子元素。

var clone = table.cloneNode(false);

但是这并不会克隆事件处理程序。 我不确定通过DOM API设置的样式是否会被克隆（可能不会）。

- Felix Kling

---

如果你的意思是 element.style.fontSize=...，它将被添加到样式属性中，因此它会被克隆。 - Patrick Evans

确实如此。我不确定，因为MDN文档提到事件处理程序也不会被克隆。 - Felix Kling

谢谢。我以前不知道 cloneNode()。 - techfoobar

关于监听器，那些内联添加的（例如作为HTML属性）会被克隆，使用IE的attachEvent添加的也会被克隆。但是使用addEventListener或直接作为属性添加的则不会被克隆（根据W3C Interface EventListener规范）。 - RobG

Answer 2

使用 .cloneNode。

var t = document.createElement("table");
t.setAttribute("style",'background:#0F0; font-size:12px;');
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createElement("input"));
tr.appendChild(td);
t.appendChild(tr);
var clone = t.cloneNode();
console.log(clone);
//outputs 
//<table style="background:#0F0; font-size:12px;"></table>

- Patrick Evans

---

请注意，在旧版本的IE中，TR元素必须附加到TBODY元素而不是TABLE元素。另一种选择是使用table.insertRow创建TR，该方法将一行附加到表格的TBODY或如果尚无可用的TBODY则创建一个。 - RobG

Answer 3

这只是另一种方法，可能是迄今为止发布的最丑陋的方法之一，但我只是增加了可能性。如果是我，我会使用Felix Kling的那个。

它基本上获取outerHTML和innerHTML，将一个减去另一个：table.prop('outerHTML').replace(table.prop('innerHTML'), ''); 这里有一个演示。

HTML

<table class="some-class" style="border:1px solid #000" id="t">
    <tr>
        <td>first</td>
    </tr>
</table>

JS

$(function () {
    $('#t').addClass('another-class');
    var table = $('#t')
    var html = table.prop('outerHTML').replace(table.prop('innerHTML'), '');
    $('body').append($(html).append('<tr><td>second</td></tr>'));
});

CSS

.some-class {
    color: #00F
}
.another-class {
    color: #00F;
    font-size: 18px;
}

- juan.facorro