При добавлении дочернего узла ошибка его выброса «Свойство appendChild» не существует в типе «NodeListOf <Element>». »

Question

при добавлении дочернего узла к литию, получение ошибки, как свойство «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>

EDIT: используйте document.querySelector выбрать только конкретный элемент

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

Answer 2

li является NodeListOf<Element>, это не само по себе является Element поэтому не имеет appendChild метод. Скорее всего, вы хотели бы указать элемент в своем списке:

li[0].appendChild(newNumberListItem);