javascript - 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]... adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node.

2) 当您附加 documentFragment 时，您实际上附加了它的所有子级(再次 MDN):

Various other methods can take a document fragment as an argument (e.g., any Node interface methods such as Node.appendChild and Node.insertBefore), in which case the children of the fragment are appended or inserted, not the fragment itself.

重点是，当您执行 someNode.append(documentFragment) 时，您会从中删除其所有子节点，然后将它们附加到 someNode 中。这就是为什么 documentFragment 结果为空。

<小时/>

请注意，当您执行此操作时...

frag_inner = '';

...您没有清除存储在该变量中的 documentFragment - 您而是在其中存储了一个新值(显然是一个空字符串)。第一次尝试像使用 documentFragment 一样使用它应该会导致类似于 TypeError: Object has no method 'appendChild'.

的结果。