从 CreateElement 向数组添加文本和值答案

【问题标题】：Adding Text and Value to Array from CreateElement从 CreateElement 向数组添加文本和值
【发布时间】：2021-10-08 21:03:10
【问题描述】：

在数组中添加 createElements - 文本和值，而不需要 forLoop。

尝试了 map、forEach，但在内存方面...它仍然滞后于大量条目。

请帮忙。

templateList example:  ["a", "b", "c", "d", "e", "f"];

var templateList = new Array();
var selection = document.getElementsByName("name")[0];

for(var i = 0; i < templateList.length; i++) {
var open = document.createElement("Option");
open.text = templateList[i];
open.value = templateList[i];
selection.add(open);
}

【问题讨论】：

到底是什么问题？ templateList 是否已经包含值？给定您的templateList 数组，代码可以缩短为const selection = document.querySelector(".name"); templateList.forEach((value) => selection.add(new Option(value, value)));。见Option。
是的，它们是字符串。问题是 for 循环必须一遍又一遍地迭代。想要尝试找到一种不必这样做的方法......它正在迭代模板列表数组中的太多变量。
为什么它必须一遍又一遍地迭代值（而不是变量）？
我想把 selection.add 放到循环之外并在循环之后添加一个节点列表可以提高绘图性能
它是如何显示的......它是一个下拉框。

标签： javascript html ecmascript-5 createelement

【解决方案1】：

使用DocumentFragment 构建选项并将它们一次全部渲染到 dom 中，您可能会获得更好的性能。我想说没有非迭代的方式

因为所有节点都一次插入到文档中，所以只会触发一次重排和渲染，而不是每个单独插入的节点都可能触发一次。

var templateList =  ["a", "b", "c", "d", "e", "f"];
var selection = document.getElementsByName("name")[0];
var opts = new DocumentFragment();

for(var i = 0; i < templateList.length; i++) {
  var open = document.createElement("Option");
  open.text = templateList[i];
  open.value = templateList[i];
  opts.appendChild(open);
}
selection.appendChild(opts);

<select name="name">


</select>

我用 js-bench 进行了测试，只获得了最小的优势 (+- 5%)，尽管理论上它应该不那么“滞后”

【讨论】：

【解决方案2】：

您可以创建所有选项字符串，然后将其添加到 innerHTML 或 selection。与您的解决方案相比，这将非常有效。

const templateList =  ["a", "b", "c", "d", "e", "f"],
      selection = document.getElementsByName("name")[0],
      options = templateList.map(v => ` <option value="${v}">${v}</option>`).join('');
selection.innerHTML = options;

&lt;select name="name"&gt;&lt;/select&gt;

【讨论】：