Question

有没有办法复制元素而不复制它的孩子？

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

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

有什么建议吗？

Answer 1

您是否考虑过使用原生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'), '');。这是demo。

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

没有孩子的克隆元素

3 个答案: