為什么此Javascript DOM方法不起作用？

Question

基本上，我試圖創建一個動態列表，該列表允許用戶添加列表/刪除列表項。

問題是由於某種原因

1）此變量中的“ createTextNode”無效。 2）

document.getElementById("myList").appendChild(list ).appendChild(inList);

工作，而

var listContainer = document.getElementById("myList").appendChild(list ).appendChild(inList);
 listCotnainer.appendChild(list).appendChild(inList);

才不是！！

任何幫助，將不勝感激。 謝謝！！

另外，如果您能將我定向到易於編寫的動態列表代碼，將不勝感激，它將為我節省大量時間。 謝謝！

 function addItem(txt) { var list = document.createElement("li"); var listAtr = list.setAttribute("class", "list-group-item"); listAtr.createTextNode(txt); var inList = document.createElement("button"); var inListAtr = inList.setAttribute("class", "btn btn-default glyphicon glyphicon-minus"); document.getElementById("myList").appendChild(list ).appendChild(inList); //listCotnainer.appendChild(listAtr); } function removeItems() { } function removeItem() { } 

 <section> <div ng-controller="addElements"> <h3>{{subtitle}}</h3> <button class="btn btn-default glyphicon glyphicon-plus" onclick="addItem('This is a test text')"></button> <button class="btn btn-default glyphicon glyphicon-minus" onclick="removeItems()"></button> <ul class="list-group" id="myList"> <!-- dynamically generate list items here --> </ul> </div> </section> 

Answer 1

您的變量listContainer是錯誤的。 它應該是：

var listContainer = document.getElementById("myList");
listCotnainer.appendChild(list).appendChild(inList);