DocumentFragment丢失了我的部分内容

Question

所以我基本上只是尝试将元素从一个节点移动到另一个节点。 我创建一个片段，然后将其子元素添加到该片段。

TodoItem

  <TableView id="my-table" fx:id="tagTable" editable="true" stylesheets="@My_Theme.css">
     <columns>
        <TableColumn fx:id="typeColumn" editable="false" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="-1.0" resizable="false" sortable="false" text="Type" />
        <TableColumn fx:id="contentColumn" editable="false" maxWidth="-Infinity" minWidth="-Infinity" prefWidth="-1.0" resizable="false" text="CONTENT" />
     </columns>
     <columnResizePolicy>
        <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
     </columnResizePolicy>
     <placeholder>
        <Label styleClass="label-dark" text="Nothing to display">
           <padding>
              <Insets bottom="200.0" />
           </padding>
        </Label>
     </placeholder>
  </TableView>

我误解了片段是如何工作的？

奇怪的是在片段中工作... 即使在我的计算机上工作也有些偏僻，但越来越陌生。

我认为在打印变量和探索变量之间会有变化。

Answer 1

您正在迭代fragment.childNodes时对其进行了突变，这导致了意外的行为。您只需要附加fragment，而不是附加每个孩子。

例如（已将元素数据属性固定为与示例中的排序js相对应）：

const fragment = document.createDocumentFragment();
const sorted = [...document.querySelectorAll('.product')].sort((a,b) => {
  return b.dataset.blockSize - a.dataset.blockSize;
});

sorted.forEach((elem) => {
  fragment.appendChild(elem);
});

document.querySelector('#destination').appendChild(fragment);

<div class="product" data-block-size="3">Product 2</div>
<div class="product" data-block-size="1">Product 3</div>
<div class="product" data-block-size="4">Product 1</div>
<div class="product" data-block-size="1">Product 4</div>

<div id="destination"></div>

或者，不使用文档片段（如果使用有限数量的元素，可能不会有很大的性能差异）。

const destination = document.querySelector('#destination');
const sorted = [...document.querySelectorAll('.product')].sort((a,b) => {
  return b.dataset.blockSize - a.dataset.blockSize;
});

sorted.forEach((elem) => {
  destination.appendChild(elem);
});

<div class="product" data-block-size="3">Product 2</div>
<div class="product" data-block-size="1">Product 3</div>
<div class="product" data-block-size="4">Product 1</div>
<div class="product" data-block-size="1">Product 4</div>

<div id="destination"></div>