javascript - 克隆没有子元素的元素

Question

有没有办法在不复制子元素的情况下复制元素？

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

我意识到我可以复制整个表格，然后从副本中删除孩子。但我想尽量减少屏幕闪烁，我似乎记得在元素在 DOM 中可见之前操作元素存在问题。

有什么建议么？

Answer 1

您是否考虑过使用 native cloneNode？该参数控制是否也应该克隆孩子。

var clone = table.cloneNode(false);

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

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>

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;
}