Czy mogę zachować odniesienie do fragmentu dokumentu?

Question

Gram z urządzeniem document fragment. Trudno mi zrozumieć, jak się zachowuje, gdy dołączam go do DOM.

Tworzę doc fragment, które przypiszę do zmiennej, po włożeniu do niej pewnych elementów i dołączeniu fragmentu dokumentu do elementu. Ale jeśli wyczyściłem element, moja zmienna, która powinna odwoływać się do fragmentu dokumentu, zawiera pusty fragment dokumentu.

Próbuję utworzyć pamięć podręczną dla biblioteki stron trzecich, która tworzy fragmenty dokumentów. Chciałbym, żeby to działało. Czy powinienem utworzyć cloneNode przed dołączeniem fragmentu do DOM, czy to prawda?

Stworzyłem skrzypiec JS: http://jsfiddle.net/4CTXG/1/

var test = document.createDocumentFragment(); 
//var test = document.createElement("div"); // This one work 

$(test).append($("<div>").html('Hello world!')); 


$("#result").append(test); 

setTimeout(function(){ 
    $("#result").children().remove(); 
    $("#result").append(test); 

    console.log('Now test should have been appended'); 
    $(result).css({"background": "#FF0000"}); 
},5000) 

Answer 1

Po dodaniu Elementu (np. <div>) do DOM, Element zostaje dodany jako dziecko nowego rodzica. Dzieci Diva nie są zmienione. Po usunięciu elementu z jego elementu nadrzędnego element jest po prostu odłączany od modelu DOM. Nadal masz odniesienie do elementu, który nadal będzie zawierał jego dzieci, dostępne do późniejszego przyłączenia.

Po dodaniu modułu DocumentFragment do DOM, elementy podrzędne dokumentu DocumentFragment są usuwane z modułu DocumentFragment i przenoszone do elementu potomnego elementu nadrzędnego elementu DOM. Funkcja DocumentFragment jest teraz pusta.

Zamiast więc dołączać DocumentFragment, należy dołączyć głęboki klon fragmentu.

Zapoznaj się z http://dom.spec.whatwg.org/#concept-node-insert, aby uzyskać szczegółowe informacje.

Answer 2

obiektów JavaScript są kopiowane przez odniesienie zamiast wartości. Kiedy przypisujesz fragment do zmiennej, a następnie wstawiasz fragment do DOM, zarówno zmienna, jak i DOM odwołują się do tego samego obiektu. Każda zmiana, którą wprowadzisz w jednym, pojawi się także w drugiej.

Jeśli naprawdę chcesz, aby zmienna odwoływała się do obiektu, który różni się od DOM, wówczas właściwym rozwiązaniem jest klonowanie.