【问题标题】：How to create and fill list item with a button?如何使用按钮创建和填充列表项？
【发布时间】：2019-08-16 12:53:00
【问题描述】：
我正在尝试使用在文本字段中输入的数据创建要显示的项目列表。我的麻烦是，当我想添加第二个列表项时，第一个只会更新。我尝试了一些不同的方法，但我被卡住了。
function addToList() {
let food = document.getElementById("food").value;
let amount = document.getElementById("amount").value;
let unit = document.getElementById("unit").value;
document.getElementById("foodlist").innerHTML =
(food + ' ' + amount + ' ' + unit + '.')
};
<input type="text" name="" value="food" id="food"><br>
<input type="text" name="" value="amount" id="amount"><br>
<select id="unit">
<option value="oz">ounces</option>
<option value="lb">pounds</option>
<option value="servings">servings</option>
</select><br>
<button onclick="addToList()" type="button" name="button" id="addButton">add</button><br>
<li id="foodlist"></li>
我希望文本字段中的数据创建一个新的列表项，并在每次按下按钮时将数据添加到对象中。到目前为止，我得到的只是列表项一直在更新。
【问题讨论】：
标签：
javascript
html
button
listitem
【解决方案1】：
您需要创建一个ul 元素并动态创建li 元素，然后将它们附加为此ul 的子元素。见以下代码：
function addToList() {
let food = document.getElementById("food").value;
let amount = document.getElementById("amount").value;
let unit = document.getElementById("unit").value;
let li = document.createElement("li");
li.textContent = food + ' ' + amount + ' ' + unit + '.';
document.getElementById("foodlist").appendChild(li);
}
<input type="text" name="" value="food" id="food">
<br>
<input type="text" name="" value="amount" id="amount">
<br>
<select id="unit">
<option value="oz">ounces</option>
<option value="lb">pounds</option>
<option value="servings">servings</option>
</select>
<br>
<button onclick="addToList()" type="button" name="button" id="addButton">add</button>
<br>
<ul id="foodlist"></ul>
【解决方案2】：
原因是当你想追加一个新项目时，你没有创建一个新的列表元素，这就是它不断替换初始值并更新初始元素的原因。
当您添加新项目时，只需使用以下代码将新列表节点附加到 DOM 即可。
function addToList() {
let food = document.getElementById("food").value;
let amount = document.getElementById("amount").value;
let unit = document.getElementById("unit").value;
var node = document.createElement("LI");
var textnode = document.createTextNode(food + ' ' + amount + ' ' + unit + '.');
node.appendChild(textnode);
document.getElementById("foodlist").appendChild(node)
};
<input type="text" name="" value="food" id="food">
<br>
<input type="text" name="" value="amount" id="amount">
<br>
<select id="unit">
<option value="oz">ounces</option>
<option value="lb">pounds</option>
<option value="servings">servings</option>
</select>
<br>
<button onclick="addToList()" type="button" name="button" id="addButton">add</button>
<br>
<ul id="foodlist"></ul>
【解决方案3】：
尝试追加内容。
请将此行 document.getElementById("foodlist").innerHTML = 更改为 document.getElementById("foodlist").innerHTML +=
并将<li id="foodlist"></li> 更改为<ul id="foodlist"></ul>
和(food + ' ' + amount + ' ' + unit + '.') 到('<li>'+food + ' ' + amount + ' ' + unit + '.</li>')
function addToList() {
let food = document.getElementById("food").value;
let amount = document.getElementById("amount").value;
let unit = document.getElementById("unit").value;
document.getElementById("foodlist").innerHTML +=
('<li>'+food + ' ' + amount + ' ' + unit + '.</li>')
};
<input type="text" name="" value="food" id="food">
<br>
<input type="text" name="" value="amount" id="amount">
<br>
<select id="unit">
<option value="oz">ounces</option>
<option value="lb">pounds</option>
<option value="servings">servings</option>
</select>
<br>
<button onclick="addToList()" type="button" name="button" id="addButton">add</button>
<br>
<ul id="foodlist"></ul>
【解决方案4】：
那是因为您使用 innerHTML 替换所有内容。您可以像这样重用现有的 HTML（使用 += 而不是 +）：
function addToList() {
let food = document.getElementById("food").value;
let amount = document.getElementById("amount").value;
let unit = document.getElementById("unit").value;
document.getElementById("foodlist").innerHTML +=
('<li>' + food + ' ' + amount + ' ' + unit + '.' + '</li>')
};
<input type="text" name="" value="food" id="food">
<br>
<input type="text" name="" value="amount" id="amount">
<br>
<select id="unit">
<option value="oz">ounces</option>
<option value="lb">pounds</option>
<option value="servings">servings</option>
</select>
<br>
<button onclick="addToList()" type="button" name="button" id="addButton">add</button>
<br>
<ul id="foodlist"></ul>
【解决方案5】：
您不能将 li 元素添加到 li 元素 - 父元素必须是 UL 或 OL 之一
按钮的每次点击都应该调用一个函数来向父节点添加一个新的 DOM 元素 - 在这种情况下，它将根据需要添加一个新的 li 元素以及来自其他表单元素的内容
<!DOCTYPE html>
<html>
<head>
<style>
form{width:60%;font-family:calibri,verdana,arial}
label{display:block;width:90%;clear:both;float:none;margin:1rem auto;padding:1rem 0 }
label > input, label > select{float:right;width:80%;padding:1rem;margin:-1rem;}
label:before{content:attr(for);text-transform:capitalize}
button{padding:1rem;width:100%;}
</style>
<script>
document.addEventListener('DOMContentLoaded',e=>{
let form=document.querySelector('form');
let food=document.querySelector('input[type="text"][name="food"]');
let amount=document.querySelector('input[type="text"][name="amount"]');
let list=document.querySelector('ul[id="foodlist"]');
let bttn=document.querySelector('button[name="button"]');
let unit=document.querySelector('select[name="unit"]');
bttn.addEventListener('click', e=>{
let li=document.createElement('li');
li.innerText = [
food.value,
amount.value,
unit.value
].join(' ');
list.appendChild( li );
form.reset();
})
});
</script>
</head>
<body>
<form method='post'>
<label for='food'><input type='text' name='food' placeholder='Food - eg: Venison' /></label>
<label for='amount'><input type='text' name='amount' placeholder='Amount - eg: 45' /></label>
<label for='unit'>
<select name='unit'>
<option selected hidden disabled>Please select
<optgroup label='Weight'>
<option value='oz'>Ounces
<option value='lb'>Pounds
<option value='gr'>Grams
</optgroup>
<optgroup label='Volume'>
<option value='ml'>Millilitre
<option value='l'>Litres
<option value='gall'>Gallons
</optgroup>
<optgroup label='Misc'>
<option value='servings'>Servings
<option value='items'>Items
</optgroup>
</select>
</label>
<button type='button' name='button'>Add</button>
</form>
<!-- LI elements are added to a UL, OL or DL -->
<ul id='foodlist'></ul>
</body>
</html>