使用prompt向ul添加列表项时新增li为空、显示undefined问题求解

错误原因 #

• 核心错误是给新增li赋值时用了不存在的属性：你已经把prompt输入的内容存在newItem变量里，但是代码中却写了li.innerHTML = li.value，刚创建的li元素本身没有value属性，所以拿到的就是undefined，导致列表项为空。
• 额外的无效代码：顶部选择items的选择器写法错误，id选择器需要加#前缀，你当前写的document.querySelector('items')无法选中对应ul元素，不过这行代码你当前逻辑没有用到，所以不影响本次功能，建议按需修正或删除。

修正后的完整代码 #

JS部分

// 这行如果不需要用可以删掉，要用的话修正为document.querySelector('#items')
// 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');
    // 把prompt拿到的内容赋值给li的文本
    li.textContent = newItem;
    ul.appendChild(li);
  }
}

说明：用textContent替代innerHTML更安全，避免用户输入恶意HTML代码导致XSS问题，如果确实需要支持HTML渲染再换回innerHTML即可。

HTML部分和原有代码一致，无需修改：

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

内容的提问来源于stack exchange，提问作者rvvd