如何渲染Document Fragment数组？创建后无法正确渲染至HTML DOM求助

问题原因 #

1. document.body.append(fragment) 直接传递数组无效，Element.append() 方法不支持数组作为参数，无法识别数组中的每个DocumentFragment。
2. 代码中x变量未声明，会成为全局变量，存在作用域隐患。

修正方案 #

方案一：遍历数组逐个添加Fragment

如果你确实需要保留多个DocumentFragment的引用，可以遍历数组，将每个Fragment单独添加到页面：

var fragment = [];

function create1() {
  for (var i = 0; i < 5; i++) {
    // 声明局部变量x，避免全局污染
    let x = document.createElement('div');
    x.className = "di";
    x.textContent = 'Change background color';
    fragment[i] = document.createDocumentFragment();
    fragment[i].append(x.cloneNode(true));
  }

  // 遍历数组，逐个添加每个Fragment到body
  fragment.forEach(frag => document.body.append(frag));
}
create1();

方案二：使用单个DocumentFragment（更高效）

DocumentFragment的核心作用是减少DOM重排次数，用单个Fragment承载所有元素后一次性添加，比多个Fragment多次操作DOM更高效：

function create1() {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 5; i++) {
    const x = document.createElement('div');
    x.className = "di";
    x.textContent = 'Change background color';
    fragment.append(x);
  }
  // 一次性将所有元素添加到DOM
  document.body.append(fragment);
}
create1();

保留原CSS样式 #

.di {
  border: solid green 2px;
  margin-right: 65em;
  margin-top: 4px;
}

内容的提问来源于stack exchange，提问作者Richard