Элемент клона без детей

Question

Есть ли способ скопировать элемент, не копируя его детей?

Моя цель - продублировать таблицу вместе со всеми классами, встроенными стилями и т. Д. Но я не хочу копировать ни одного из дочерних элементов элемента таблицы.

Я понимаю, что могу скопировать всю таблицу, а затем удалить детей из копии. Но я хочу свести к минимуму мерцание экрана и, кажется, вспоминаю, что есть проблемы с манипулированием элементами, прежде чем они будут видны в DOM.

Какие-либо предложения?

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

Это просто еще один способ сделать это, возможно, самый уродливый из всех опубликованных на данный момент, но я просто добавляю возможности. Если бы это был я, я бы использовал одну из них Феликса Клинга.

Это в основном получает 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;
}