为什么这个Javascript DOM方法没有'不起作用

Why this Javascript DOM method doesn't work?

本文关键字:不起作用 方法 Javascript DOM 为什么      更新时间:2023-09-26

基本上,我正在尝试创建一个动态列表,允许用户添加列表项/删除列表项。

问题是由于某种原因

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>

您的变量listContainer错误。应该是:

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