如何在使用appendChild()时为动态列表项添加name属性以访问元素？

完全没问题——你只需要在创建<li>元素之后，直接为它设置name属性即可，这和使用appendChild()的操作互不影响。

修改后的代码示例 #

function addOrder(theName, thePrice) {
  var li = document.createElement("li");
  // 直接添加name属性，两种方式都可行
  li.setAttribute('name', theName); 
  // 或者用点语法：li.name = theName;
  var t = document.createTextNode(theName);
  li.appendChild(t);
  document.getElementById("cart").appendChild(li);
}

补充说明 #

• 两种设置属性的方式：
  • setAttribute()是通用的属性设置方法，适用于所有HTML元素的属性
  • 点语法（li.name）对于一些标准DOM属性也能生效，不过setAttribute()在处理自定义属性或特殊属性时兼容性更好
• 小建议：如果你的目的是后续方便定位或操作这个列表项，其实使用id（注意保证唯一性）或者自定义的data-*属性（比如data-item-name）会更符合HTML语义规范，因为name属性原本主要为表单元素（如<input>、<select>）设计。比如：

  li.dataset.itemName = theName;
  // 后续可以通过document.querySelector('[data-item-name="xxx"]')来选择元素
  

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