Как мне сделать упорядоченный список, используя 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 и назвать его двумя и т. д., другими словами, считая количество 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

Да, я знаю, что я предоставляю заказанный список!

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 для ввода innerHTML внутри div

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 очень популярен в настоящее время, и я думаю, что вы также должны использовать это. В Stackru уже есть тема с использованием Jquery, описывающая, что вы хотите => Создание неупорядоченного списка с помощью jQuery

Answer 4

Вы могли бы сделать что-то вроде этого:

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