Элемент documentFragment перезагружается?

Question

Это странное поведение, которое я заметил. Я не сбрасывал документ, но сразу использовал его после того, как я его добавил, а прежних элементов, которые он содержал, не было.

Должен ли я очищать его как таковой?

frag_inner = ''; 

Есть ли побочные эффекты, о которых я не знаю?

frag_outer = NS.createDocumentFragment(); 
frag_inner = NS.createDocumentFragment(); 

NS.eachIndex(obj, function(val) { 

    // fragment element - inner 

    // image element 

    val.view_picture = (val.picture === '0') ? this.A.images + 'generic_large.jpg' : 
      this.A.pictures + val.h_file + '-2.jpg'; 
    img_element = $A.createElement('img'); 
    img_element.className = 'tweet'; 
    img_element.src = val.view_picture; 
    frag_inner.appendChild(img_element); 

    // link element 

    link_element = $A.createElement('a'); 
    link_element.className = 'tweet'; 
    link_element.innerHTML = val.name + ' posted ' + 
      this.prettyTime(val.time) + '<br>'; 
    frag_inner.appendChild(link_element); 

    // paragraph element 

    par_element = $A.createElement('p'); 
    par_element.className = 'tweet'; 
    par_element.innerHTML = val.tweet; 
    frag_inner.appendChild(par_element); 

    // div element 

    div_element = $A.createElement('div'); 
    div_element.className = 'tweet'; 
    div_element.appendChild(frag_inner); 

    // append the div which is now populated 

    frag_outer.appendChild(div_element); 

}, this); 

Answer 1

Я думаю, что это на самом деле ожидаемое поведение, так как ...

1) это хорошо известная особенность Node.appendChild для перемещения существующих узлов. Как сказано в документации (MDN) ...

[Node.appendChild] ... добавляет узел в конец списка детей указанного родительского узла. Если узел уже существует, он удаляется из текущего родительского узла , а затем добавляется в новый родительский узел.

2) когда вы добавляете documentFragment, вы на самом деле добавить все его дети (MDN снова):

Различные другие методы могут взять фрагмент документа в качестве аргумента (например, любые методы интерфейса Node такие как Node.appendChild и Node.insertBefore), и в этом случае дети фрагмента добавляются или вставлены , а не сам фрагмент.

Дело в том, когда вы делаете someNode.append (DocumentFragment), удалить все его дети от нее, а затем добавить их в someNode. Вот почему documentFragment пуст.

---

Обратите внимание, что когда вы делаете это ...

frag_inner = ''; 

... вы не очищая DocumentFragment, хранящийся в этом переменном - вы сохраняете новое значение (пустую строку, очевидно) в нем вместо этого. Самая первая попытка работать с ним, как с documentFragment, должна привести к чему-то вроде TypeError: Object has no method 'appendChild'.