添加子节点时，抛出错误"Property 'appendChild' does not exist on type 'NodeListOf<Element>'."

Question

将子节点附加到 li 时，出现类似 属性 'appendChild' 的错误在类型 'NodeListOf' 上不存在

let li: NodeListOf<Element> = document.querySelectorAll("name li");  

        var newItem = document.createElement("li");
        var ListValue = document.createTextNode("abcd");
        var ListValue = document.createTextNode("efgh");
        var ListValue = document.createTextNode("ijkl");


        newItem.appendChild(ListValue);
        li.appendChild(ListItem);

Answer 1

document.querySelectorAll 是一个数组而不是一个元素，你应该遍历你的 li 变量，但我猜你想将一个项目添加到现有列表中，如果这是在这种情况下，您应该将该项目附加到列表容器 <ul>...</ul>

编辑：使用 document.querySelector 到 select 仅特定元素

此外，定义新的自定义 html 标签是一种不好的做法，请尝试使用 class，因此对于这样的 html：

<ul class="test">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

使用这个：

let li: NodeListOf<Element> = document.querySelector("ul.test");

var newNumberListItem = document.createElement("li");
var numberListValue = document.createTextNode("java");
var numberListValue = document.createTextNode("ajax");
var numberListValue = document.createTextNode("javascript");

newNumberListItem.appendChild(numberListValue);
li.appendChild(newNumberListItem);

提示：如果您使用的是 ES6，请避免使用 var 并使用 const 表示不会在您的范围内更改的值，使用 let 表示变量

    let li: NodeListOf<Element> = document.querySelector("ul.test");

    var newNumberListItem = document.createElement("li");
    var numberListValue = document.createTextNode("java");
    var numberListValue = document.createTextNode("ajax");
    var numberListValue = document.createTextNode("javascript");

    newNumberListItem.appendChild(numberListValue);
    li.appendChild(newNumberListItem);

    <ul class="test">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

Answer 2

li 是一个 NodeListOf<Element>，它本身不是 Element，所以它没有 appendChild 方法。您最有可能想做的是处理列表中的一个元素：

li[0].appendChild(newNumberListItem);

添加子节点时，抛出错误"Property 'appendChild' does not exist on type 'NodeListOf<Element>'."

When appending childnode, its throwing error "Property 'appendChild' does not exist on type 'NodeListOf<Element>'."

javascript

appendchild

nodes

typescript