时间戳

首页 > 解决方案 > Javascript For循环一次附加相同的元素

javascript - Javascript For循环一次附加相同的元素

问题描述

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

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

标签： javascriptloopsfor-loopappendchild

解决方案

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

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

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

笔记：

克隆节点会复制其所有属性及其值，包括内在（内联）侦听器。它不会复制使用添加的事件侦听器

推荐阅读