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

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

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

我想要的是用 JS 在两个 li 上创建一个 ol 元素并将它们放在列表中的第二个位置，当我为 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>

解决方法

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

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

其中 i 是下一个元素的位置。在您的情况下，父元素是一个 ol 元素，子元素是它的 li 元素。您想在第二个位置插入一个元素，因此 i 为 2。

要将其应用于每个 ol，只需在您拥有的每个父元素上循环，并按类进行选择。

如果我理解你的话，也许你需要：

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,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>