Question

运行此命令时，我希望可以创建4个<li class="event-wrap">元素并将其附加到eventsNode中，但是只有一个可以做到。

创建元素并将其添加多次的正确方法是什么？

const li = document.createElement('li');
li.classList = 'event-wrap';
eventsNode.appendChild(li);
eventsNode.appendChild(li);
eventsNode.appendChild(li);
eventsNode.appendChild(li);

Answer 1

您需要先克隆li

const li = document.createElement('li');
li.classList = 'event-wrap';
eventsNode.appendChild(li.cloneNode());
eventsNode.appendChild(li.cloneNode());
eventsNode.appendChild(li.cloneNode());
eventsNode.appendChild(li.cloneNode());

Answer 2

方法1：您不能多次附加一个对象。只需克隆它即可。然后将其放入for循环中。

const li = document.createElement('li');
li.classList = 'event-wrap';
for (var i=0; i<4 ; i++){
  eventsNode.appendChild(li.cloneNode());
}

方法2： 如果要手动创建对象，也可以执行以下操作：

const li1 = document.createElement('li');
const li2 = document.createElement('li');
const li3 = document.createElement('li');
const li4 = document.createElement('li');
li1.classList = 'event-wrap';
li2.classList = 'event-wrap';
li3.classList = 'event-wrap';
li4.classList = 'event-wrap';
eventsNode.appendChild(li2);
eventsNode.appendChild(li3);
eventsNode.appendChild(li4);
eventsNode.appendChild(li5);

当然，您可以创建自己的函数来返回所述对象。

appendChild（相同的const）多次？

2 个答案: