Làm thế nào để sao chép (và khôi phục) một subtree DOM

Question

Tôi muốn sửa đổi một subtree DOM và khôi phục lại nó sau một thời gian. Làm thế nào tôi có thể lưu một bản sao cây con sang một bên (để chơi với cây con thực tế)? Làm thế nào tôi có thể khôi phục bản sao đã lưu sau đó?

Answer 1

Nếu tôi đang đọc quyền này, sau đó tôi nghĩ rằng tất cả bạn cần làm là:

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

Và sau đó tái gắn DomTreeCopy (ở vị trí của gốc):

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

Hoặc để thêm nó vào DOM ngoài với bản gốc:

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

Tài liệu tham khảo:

• clone().
• insertAfter().
• replaceWith().

Answer 2

bạn có thể sử dụng $.data() ... phương pháp

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

đây là bạn có thể lưu trữ tất cả WAHT bạn muốn trong một loại từ điển - và sau đó tái sử dụng nó sau này.

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

Answer 3

Bạn có thể lưu trữ đối tượng được sao chép ở một nơi khác trong DOM. Sửa đổi DOM hiển thị. Khi bạn yêu cầu giá trị thực tế, bạn có thể theo dõi nó từ nơi bạn đã nối.

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

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

Sau đó theo dõi dom ban đầu với $("#oldInfo")

Answer 4

Sử dụng JavaScript đơn giản:

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

Working demo

MDN - cloneNode

MDN - replaceChild

Lưu ý rằng việc sử dụng phương pháp này, trình xử lý sự kiện của bạn là không được khôi phục. Nhưng bạn cũng có thể sao lưu chúng, vì chúng chỉ là những chức năng bình thường.

Hóa ra, tôi đã sai về điều đó. Trình xử lý sự kiện được giữ nguyên vì đó là DOM gốc mà bạn đang khôi phục. Nếu bạn đang sao chép và thêm nó ở nơi khác, trình xử lý sự kiện sẽ không được sao chép. This demo cho thấy trình xử lý sự kiện vẫn còn.