在多个 ol 上创建多个 li 并将它们放在特定位置

Question

对不起我的英语不好，我正在学习js希望你能帮助我=)

我想要的是用 JS 在 ol 上创建一个 li 元素，并将它们放在列表中的第二个位置，当我为 1 ol 做的时候有效，但是当我尝试将其放入循环 (for) 时，它不起作用 =( 我对此很菜鸟，如果你能帮助我，我将不胜感激谢谢

for (i = 0; i > 1; i++) {
  var newelementlist = document.createElement("li");
  var newcontent = document.createTextNode("Element N3");
  newelementlist.appendChild(newcontent);

  var container = document.getElementsByClassName("list")[i];
  var lastson = container.lastElementChild;
  container.appendChild(newelementlist);
  container.insertBefore(newelementlist, lastson);
}

<body>
  <ol class="list">
    <li>Element N1</li>
    <li>Element N2</li>
  </ol>
  <br>
  <ol class="list">
    <li>Element N1</li>
    <li>Element N2</li>
  </ol>
  <br>
</body>

Answer 1

要将 DOM 元素附加到特定位置，您可以使用 insertBefore :

parent.insertBefore(newElement, parent.children[i])

其中i是下一个元素的位置。在您的情况下，父项是一个 ol 元素，子项是其 li 元素。你想在第二个位置插入一个元素，所以 i 是 2.

要将此应用到每个 ol，只需在您选择的每个父元素上循环 class。

Answer 2

如果我很了解你，也许是你需要的：

let ols = [...document.querySelectorAll('ol.list')]; // get all <ol class="list">
ols.forEach(ol => { // iterate...
    let lis = [...ol.querySelectorAll('li')]; // get all <li> child
  lis.forEach(li => ol.removeChild(li)); // iterate to remove from <ol> parent
  let newLi = document.createElement("li"); // create your new <li>
  let newContent = document.createTextNode('New Element'); // create new content for new <li>
  newLi.appendChild(newContent); // append the content into new <li>
    lis.splice(1, 0, newLi); // add the new <li> at the second position in array (index 1)
  lis.forEach(li => ol.appendChild(li)); // append all <li> on current <ol>
})

<html>
<head>
</head>
<body>
      <ol class="list">
        <li>Element N1</li>
        <li>Element N2</li>
      </ol>
      <br>
      <ol class="list">
        <li>Element N1</li>
        <li>Element N2</li>
      </ol>
      <br>
</body>
</html>

在多个 ol 上创建多个 li 并将它们放在特定位置

Creating Multiple li on multiple ol and put them in specific position

javascript

appendchild

html-lists