Как клонировать (и восстанавливать) поддерево DOM

Я хотел бы изменить поддерево DOM и восстановить его через некоторое время. Как я могу сохранить копию древовидного дерева (чтобы играть с фактическим поддеревом)? Как восстановить сохраненную копию позже?

ОТВЕТЫ

Ответ 1

Если я читаю это право, я думаю, что все, что вам нужно сделать, это:

var DomTreeCopy = $('parentElementSelector').clone(true,true);

И затем снова присоединить DomTreeCopy (вместо оригинала):

$('parentElementSelector').replaceWith(DomTreeCopy);

Или добавить его в DOM в дополнение к оригиналу:

$(DomTreeCopy).insertAfter($('parentElementSelector'));

Литература:

Ответ 2

Использование простого JavaScript:

var elem = document.getElementById('theElement'),
    backupElem = elem.cloneNode(true);
// Your tinkering with the original
elem.parentNode.replaceChild(backupElem, elem);

Рабочая демонстрация

MDN - cloneNode

MDN - replaceChild

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

Оказывается, я ошибался. Обработчики событий сохраняются, так как они восстанавливают исходный DOM. Если вы копировали его и добавляли в другое место, обработчики событий не копировались. Эта демонстрация показывает, что обработчик событий остается.

Ответ 3

вы можете использовать $.data()... method

    $.data(document.body, "sortElement", "0"); //set value
    $.data(document.body, "sortElement");        //read value

это вы могли хранить все waht, которые вы хотите в словаре, - и затем повторно использовать его позже.

http://api.jquery.com/jQuery.data/

Ответ 4

Вы можете сохранить клонированный объект где-то еще в DOM. Измените DOM, который виден. Когда вам требуется фактическое значение, вы можете отслеживать его с того места, где вы добавили.

<div id="oldInfo"></div>

$("#youActualDom").clone().appendTo("#oldInfo").hide();

Затем отследите исходный dom с помощью $("#oldInfo")