Javascript For循环追加同一个元素一次

Question

这是为了理解JS Loop的逻辑。在下面的代码中，我希望 <li> 元素将在 <ul> 标记内追加 3 次。所以我应该在 <ul> 标签内得到 3 <li> 标签。根据我的理解，循环内的任何操作都将根据条件进行。按照我应该在这里得到 3 个空白 <li> 标签。但我只得到 1。任何人都可以解释我的方法有什么问题以及我应该如何编写它。提前致谢！

let ul = document.querySelector("ul");
let li = document.createElement("li");
for (i = 0; i <=3; i++) {
  ul.appendChild(li);
}

Answer 1

您每次都需要创建一个新元素。如果您多次附加 相同的 元素，它将在 DOM 中移动它，但不会克隆它。

一个简单的解决方案是使用 cloneNode:

let node = document.createTextNode("")
for (i = 0; i <3; i++) 
  document.body.appendChild( node.cloneNode() )

注：

Cloning a node copies all of its attributes and their values, including intrinsic (inline) listeners. It does not copy event listeners added using

Answer 2

为什么

appendChild replace self element bug

解决方案

在循环内创建新的li


const ul = document.createElement("ul");
// li = document.createElement("li");

for (i = 0; i < 3; i++) {
   const li = document.createElement("li");
   // console.log('i =', i, ul);
   ul.insertAdjacentElement('beforeend', li);
}
ul;
// <ul><li></li><li></li><li></li></ul>

使用 DOM 字符串创建所有子项


const ul = document.createElement("ul");
let li = '';

for (i = 0; i < 3; i++) {
   li += '<li></li>';
}

ul.insertAdjacentHTML('beforeend', li);

ul;
// <ul><li></li><li></li><li></li></ul>

参考

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement

Javascript For循环追加同一个元素一次

Javascript For loop appends same element once

javascript

loops

for-loop

appendchild

为什么

解决方案

参考