Проблема добавления элемента с текстом в дерево DOM

Question

Я создал неупорядоченный список элементов и пытаюсь добавить новый элемент с помощью манипуляции DOM.

var newEl = document.create Element('li');
var newText = document.createTextNode('Hawaii');
var newEl = newEl.appendChild(newText);
document.getElementsByTagName('ul')[0].appendChild(newEl);

Элемент был добавлен в элемент ul, но не был добавлен как элемент li , так что мой новый текст не имеет маркировки.

Answer 1

Эта строка

    var newEl = newEl.appendChild(newText); 

Изменить на

    newEl.appendChild(newText); 

Когда вы переназначаете его, он больше не является ли (это не JQ)

Answer 2

избежать переназначения на newEl.

var newEl = document.createElement('LI');
var newText = document.createTextNode('Hawaii');
newEl.appendChild(newText);
document.getElementsByTagName('ul')[0].appendChild(newEl);

Answer 3

.appendChild возвращает добавленный элемент. В этом случае ваш newEl будет текстовым узлом после этого назначения.

var newEl = newEl.appendChild(newText);

Вы должны удалить назначение, и это нормально.

Answer 4

Вы можете попробовать это. Установите идентификатор для элемента ul и добавьте новый тег li в тег ul

 var node = document.createElement("li");
 var textnode = document.createTextNode("Hawaii");
 node.appendChild(textnode);  
document.getElementById("myList").appendChild(node);

<ul id="myList">
  <li>Item 1</li>
  <li>Itm 2</li>
</ul>