如何使用JavaScript制作有序列表？

Question

可以說我有這個

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

我想使用.js而不是使用LI標簽來創建有序列表。 我在想js。 代碼可以替換第一個V1並將其命名為1.，替換第二個V1並將其命名為2，依此類推，換句話說，計算有多少個V1並將其替換為有序列表。

也許像這樣

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

從1開始每次都會增加i ++

是的，我知道LI提供了訂購清單！

Answer 1

您可以有一個空的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 2

我建議您學習（使用）JavaScript框架來完成此任務。 它將加快您的javascript開發速度。 jQuery目前非常流行，我認為您也應該使用它。 Stackoverflow allready已使用Jquery主題描述了您想要的內容=> 使用jQuery生成無序列表

Answer 3

也許您想遍歷<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 4

您可以執行以下操作：

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