在 javascript 中将 <li> 添加到 <ul> 对象答案

【问题标题】：Adding a <li> to a <ul>-object in javascript在 javascript 中将 <li> 添加到 <ul> 对象
【发布时间】：2018-03-15 18:19:02
【问题描述】：

我正在尝试创建一个函数，在该函数中，用户单击按钮以将项目添加到项目的无序列表中（不使用 jQuery）。这是我的js代码：

window.onload = function(){
    document.body.addEventListener("click", function(event) {
    	if (event.target.id == "add-item")
    		var item = prompt();  /** returns a string variable */
    		var itemlist =  document.getElementById("items");
    		console.log(typeof itemlist); /** returns an object*/
    	//	itemlist.createElement("li"); /** A node is the generic name for any type of object in the DOM hierarchy. */
    
    	
    });
    	
     }

<ul id="items">
    	<li>The first item is free!</li>
    	</ul>
    
    <button type="button" id="add-item">Add item</button>

目前我收到以下错误：

未捕获的类型错误：itemlist.createElement 不是函数在 HTMLBodyElement。

请注意，我也尝试过使用 querySelector 来获取项目列表，以及项目列表上的函数 appendChild()，但都不起作用...

非常感谢任何帮助或建议！

【问题讨论】：

标签： javascript dom html-lists getelementbyid createelement

【解决方案1】：

createElement 是document 对象的一个方法。创建后，您可以将其附加到另一个元素。

var list_item = document.createElement("li");
itemlist.appendChild(list_item);

【讨论】：

【解决方案2】：

createElement 是 document 上的函数，而不是 itemlist 上的函数。

改用这个：

var li = document.createElement("li");
li.innerHTML = item;     // Set the text from the propt's return value.
itemlist.appendChild(li);

【讨论】：