Добавить элемент ввода в элементы списка

Question

Я пытаюсь перебрать упорядоченный список и добавить кнопку ввода для каждого элемента списка (расширение Chrome).

Я получаю следующую ошибку: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method..

Разве нельзя добавить дочерний элемент в <li> таким способом?Есть идеи, где я ошибаюсь?

function formatList() {
  const stepsList = document.querySelector("ol.someClass");
  stepsList.childNodes.forEach((step, index) => {
    const checkboxElement = document.createElement("input");
    checkboxElement.setAttribute("type", "checkbox");
    checkboxElement.onclick = () => {
      stepsList.removeChild(step);
    };
    step.appendChild(checkboxElement);
  });
}

Моя идеальная структура вывода будет выглядеть примерно так:

<ol>
  <li><input type="checkbox"/>Some text here!</li>
  <li><input type="checkbox"/>Some text here!</li>
  <li><input type="checkbox"/>Some text here!</li>
</ol>

Answer 1

Попробуйте с детьми o восстановить только элементы li:

function formatList() {
  const stepsList = document.querySelector("ol.someClass");
  console.log(stepsList);
  [...stepsList.children].forEach((step, index) => {
    console.log(step);
    const checkboxElement = document.createElement("input");
    checkboxElement.setAttribute("type", "checkbox");
    checkboxElement.onclick = () => {
      stepsList.removeChild(step);
    };
    step.appendChild(checkboxElement);
  });
}

formatList();

 <ol class="someClass">
    <li></li>
    <li></li>
    <li></li>
  </ol>