將新的列表項添加到<ul>

Question

當我在提示中寫一些東西時，我得到了欠缺。 當我在提示中寫一些東西時，我希望它像一個新的列表元素一樣添加到列表中。 例如，如果我在提示中寫“食物”，我希望它在第二行寫“食物”。 現在它添加了一個新的列表元素，但它是空的。 這是我的代碼：

 var items = document.querySelector('items'); function addItemToList() { var newItem = prompt("Add item to list"); if (newItem != null) { var ul = document.querySelector('ul'); var li = document.createElement('li'); ul.appendChild(li); li.innerHTML = li.value; } }

 <ul id="items"> <li>Drinks</li> </ul> <input class="buttom-add" type="button" id="btnAdd" value="Add Item" onclick="addItemToList()">

Answer 1

您將新附加的li的innerHTML設置為其value屬性（即 0），而不是prompt返回的值。

相反，將newItem分配給li的innerHTML屬性：

 var items = document.querySelector('items'); function addItemToList() { var newItem = prompt("Add item to list"); if (newItem != null) { var ul = document.querySelector('ul'); var li = document.createElement('li'); ul.appendChild(li); li.innerHTML = newItem; } }

 <ul id="items"> <li>Drinks</li> </ul> <input class="buttom-add" type="button" id="btnAdd" value="Add Item" onclick="addItemToList()">

Answer 2

你只需要用li.innerHTML = newItem;更改最后一行li.innerHTML = newItem; 以便您分配從提示中讀取的項目。

 var items = document.querySelector('items'); function addItemToList() { var newItem = prompt("Add item to list"); if (newItem != null) { var ul = document.querySelector('ul'); var li = document.createElement('li'); ul.appendChild(li); li.innerHTML = newItem; } }

 <ul id="items"> <li>Drinks</li> </ul> <input class="buttom-add" type="button" id="btnAdd" value="Add Item" onclick="addItemToList()">