重复追加子项 x 次

repeat appendChild x times

本文关键字：追加      更新时间：2023-09-26

我把这个简单的代码包装在一个函数里：

slots = timeset / 2;
var oneslot = document.createElement("option");
document.getElementById('presentingslots').appendChild('oneslot');

变量插槽变化明显。我想附加儿童插槽 x 次，其中 x = 插槽我该怎么做？

如果slots很小，你可以侥幸在循环中附加每个元素：

slots = timeset / 2;
for (var i = 0; i < slots; i++) {
    var oneslot = document.createElement('option');
    document.getElementById('presentingslots').appendChild(oneslot);
}

如果slots可以很大，那么您需要使用 DocumentFragment：

slots = timeset / 2;
var df = document.createDocumentFragment();
for (var i = 0; i < slots; i++) {
    var oneslot = document.createElement('option');
    df.appendChild(oneslot);
}
document.getElementById('presentingslots').appendChild(df);

这将更有效，因为 DOM 只更新一次。

试试这个：

slots = timeset / 2;
for (var i = 0; i < slots; i += 1) {
  var oneslot = document.createElement("option");
  document.getElementById('presentingslots').appendChild('oneslot');
}

您可以使用循环（for，while）来执行此操作。

slots = timeset / 2;
var presentingslots = document.getElementById('presentingslots');
for (var i = 0; i < slots; i++) {
  var oneslot = document.createElement('option'); 
  presentingslots.appendChild(oneslot);
}
一个简单的

for 循环就可以了。 您可以设置值以及显示的文本。

var slots = timeset / 2,
    el = document.getElementById('presentingslots');
for (var i = 0; i < slots; i++) {
    var oneslot = document.createElement('option');
    oneslot.text = i;
    oneslot.value = 'set my value if you want';
    el.appendChild(oneslot);
}

我做了一个简单的jsFiddle来展示。

相关文章：