点击按钮生成食品无序列表时，解决显示[object Object]而非商品名称的问题

嘿，这个问题我之前也碰到过！你现在看到每个列表项都是[object Object]，是因为你把整个对象直接传给了document.createTextNode()方法——JS在把对象转成文本的时候，默认就会输出这个字符串，它根本不知道你要显示对象里的name属性~

只需要改一行代码就能搞定：把创建文本节点时传入的item改成item.name，这样就会提取每个商品对象里的名称了。

修正后的完整代码如下：

let groceryList = [ {name: "banana", price: 5}, {name: "milk", price: 3}, {name: "bread", price: 1}, {name: "chips", price: 2} ]
let ul = document.getElementById("itemList")
let btn = document.getElementById("btn")
btn.addEventListener("click", function () {
  for (let i = 0; i < groceryList.length; i++) {
    let item = groceryList[i]
    let li = document.createElement("li")
    // 这里改成item.name，取对象的name属性
    li.appendChild(document.createTextNode(item.name))
    ul.appendChild(li)
  }
})

额外给你个小建议：如果担心以后数组里的对象可能没有name属性，可以加个兜底处理，避免显示空内容，比如用可选链和默认值：

li.appendChild(document.createTextNode(item?.name || '未知商品'))

这样不管对象有没有name，列表都能正常显示内容啦！

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