javascript - JS 追加元素

Question

我正在生成一些 <li>与 JS 一起进入我的列表。这个<li>由几个元素组成，例如 <div> , <section> ， ETC。

//here I get my <ul>
let list = document.getElementById('list');

//here I generate 5 <li>
for (let li = 0; li < 5; li++){
    let li_wrapp = document.createElement('li');
   
    //here I take together some elements in <li>. Part of my question.
    for (let li_elements = 0; li_elements < 5; li_elements++){
       li_wrapp.appendChild(document.createElement('div');
    }
    list.appendChild(li_wrapp);
}

我的问题是。现在，我在数组中生成确切数量的元素，然后从该数组中附加这些元素。但我想知道，如果我能够在 for 中创建的那个 div 上附加一些东西上面的循环。
现在在我的代码中，我刚刚在数组中创建了 5 个 div，并且我正在追加它们。

//here I get my <ul>
let list = document.getElementById('list');

//here I generate 5 <li>
for (let li = 0; li < 5; li++){
    let li_wrapp = document.createElement('li');
    let div_array = [];
   
    //here I take together some elements.
    for (let li_elements = 0; li_elements < 5; li_elements++){
       //here I create div in array
       div_array[li_elements] = document.createElement('div');
       //here I append that div to wrapper
       li_wrapp.appendChild(div_array[li_elements]);
       //and here I am able to append something to that div. 
       div_array[li_elements].append.... etc
    }
    list.appendChild(li_wrapp);
}

但是这个解决方案对我来说看起来很丑陋。难道这里不是另一种方法可以使这更容易和更有效吗？
因为如果我想做一个 <li>有更多的元素，这是一个相当大的代码块。

Answer 1

因为 Node.appendChild() 返回附加的元素，您可以通过链接调用将您的代码简化如下:

const ul = document.getElementById('list');

for (let i = 0; i < 5; i++) {
  ul.appendChild(document.createElement('li'))
    .appendChild(document.createElement('div'));
}

<ul id="list"></ul>

另一种选择是构建 li构造一次，然后使用 Node.cloneNode() 创建 5 个深度克隆.

const ul = document.getElementById('list');

const li = document.createElement('li');
li.appendChild(document.createElement('div'));

for (let i = 0; i < 5; i++) {
  ul.appendChild(li.cloneNode(true));
}

<ul id="list"></ul>

除了上面列出的建议之外，可能还值得研究一下 ParentNode.append() 。因为它允许您一次附加多个元素。
不过考虑到一切，您可能应该研究 Angular、React 或 Vue 等框架。 jQuery 也有一些实用工具可以让这件事变得更简单，但是 2020 年推荐 jQuery 并不太符合时代...