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

尝试带孩子或仅检索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>

在列表元素内添加输入元素

1 个答案: