Pertanyaan Cara mengkloning (dan mengembalikan) subtree DOM


Saya ingin memodifikasi subtree DOM dan memulihkannya setelah beberapa saat. Bagaimana saya dapat menyimpan salinan sub-tree (untuk bermain dengan subtree yang sebenarnya)? Bagaimana saya bisa mengembalikan salinan yang tersimpan sesudahnya?


10
2018-01-02 14:48


asal


Jawaban:


Jika saya membaca ini dengan benar, maka saya pikir yang perlu Anda lakukan adalah:

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

Dan kemudian pasang kembali DomTreeCopy (di tempat aslinya):

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

Atau menambahkannya ke DOM selain yang asli:

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

Referensi:


13
2018-01-02 14:54



Menggunakan JavaScript sederhana:

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

Demo kerja

MDN - cloneNode

MDN - replaceChild

Perhatikan bahwa menggunakan metode ini, penangan acara Anda tidak pulih. Tetapi Anda dapat mendukungnya juga, karena itu hanya fungsi biasa.

Ternyata, aku salah tentang itu. Penangan acara dipertahankan karena ini adalah DOM asli yang Anda pulihkan. Jika Anda menyalin dan menambahkannya di tempat lain, pengendali acara tidak akan disalin. Demo ini menunjukkan bahwa pengendali event masih ada.


8
2018-01-02 15:18



Kamu dapat memakai $.data()... metode

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

ini adalah Anda dapat menyimpan semua yang Anda inginkan dalam jenis kamus - dan kemudian menggunakannya kembali nanti.

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


1
2018-01-02 14:50



Anda dapat menyimpan objek kloning di tempat lain di DOM. Ubah DOM yang terlihat. Ketika Anda membutuhkan nilai yang sebenarnya Anda dapat melacaknya dari tempat di mana Anda telah ditambahkan.

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

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

Kemudian lacak dom asli dengan $("#oldInfo")


0
2018-01-02 14:55