appendChild(相同常量)多次

Question

当我运行这个时，我希望在eventsNode中创建并附加4个<li class="event-wrap">元素，但只有一个这样做。

创建元素并根据需要多次添加的正确方法是什么？

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);

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