javascript - 如何使用javascript制作有序列表？

Question

可以说我有这个

<ol>
  <li>V1 One</li>
  <li>V1 Two</li>
  <li>V1 Three</li>
  <li>V1 Four</li>
</ol>`

LI我想使用 .js 而不是使用标签来制作有序列表。我在想js。代码可以替换第一个 V1 并将其称为 1. ，替换第二个 V1 并将其称为两个等等，换句话说，计算有多少 V1 并用有序列表替换它们。

或者可能是这样的

<ol>
  <li>i++ V1 One</li>
  <li>i++ V1 Two</li>
  <li>i++ V1 Three</li>
  <li>i++ V1 Four</li>
</ol>

其中 i++ 每次都会从 1 开始增加

是的，我知道 LI 提供有序列表！

Answer 1

也许你想遍历<ol>并操纵他们的孩子innerHTML？

// Get the <ol> object from the DOM
var chillun = document.getElementById("yourOL").childNodes;

// Loop through the children of the <ol>
for(i=0;i<chillun.length;i++) {
  // Test that the node is indeed an <li>
  if(chillun[i].nodeName=='LI') {
    // Change this line to manipulate the text however you need
    chillun[i].innerHTML = i;
  }
}

Answer 2

您可以有一个空的 div，并使用 javascript 在 div 内输入 innerHTML

function listdown(){
  var startlist = "<ol>";
  var endlist = "</ol>";
  *use a for loop to enter the <LI>, this way, you can do much more with each item*
  document.getElementById("emptydiv").innerHTML = startlist + LI list + endlist;
}

编辑

尽管如此，JQuery 仍然是最好的选择

Answer 3

我建议你学习（使用）一个 javascript 框架来完成这个。它将迅速加快您的 javascript 开发。Jquery 目前非常流行，我认为您也应该使用它。Stackoverflow 已经有一个使用 Jquery 描述你想要什么的主题 =>使用 jQuery 生成无序列表

Answer 4

你可以这样做：

let ol = document.querySelector('ol');
let i = 1;
ol.querySelectorAll('li').forEach(function(li) {
    li.textContent = (i++) + ' ' + li.textContent;
});