购物清单从Table转Li：JavaScript中createElement/appendChild实现方案咨询

没问题，我来帮你把表格实现的购物清单改成纯列表形式，完全用createElement()和appendChild()来动态创建元素。先理清楚核心思路：

• 先确认你的列表容器（就是你代码里的.adding元素），我们会把每个商品项都添加到这个容器里
• 删掉原来操作表格的代码，换成创建列表项的逻辑
• 每个商品项用<li>元素承载，里面可以用<span>区分商品名和价格，方便后续样式控制

接下来是具体的代码修改，我基于你给出的变量补充完整：

// 保留你已有的变量，顺便把语义化不好的newTab改成listContainer
let addItem = document.querySelector("#addButton");
let listContainer = document.querySelector(".adding"); 
let priceInput = document.querySelector("#price");
let productInput = document.querySelector("#product"); // 假设你的商品输入框id是product，要是不对你自己改下

// 删掉原来的table变量，因为我们不用表格了

// 给添加按钮绑定点击事件
addItem.addEventListener("click", function() {
  // 先获取输入值并做简单校验
  const productName = productInput.value.trim();
  const productPrice = priceInput.value.trim();
  
  if (!productName || !productPrice || isNaN(productPrice)) {
    alert("请输入有效的商品名称和数字价格！");
    return;
  }

  // 1. 创建列表项元素 <li>
  const listItem = document.createElement("li");
  
  // 2. 创建商品名称的span（可选，但方便样式控制）
  const nameSpan = document.createElement("span");
  nameSpan.textContent = productName;
  nameSpan.classList.add("product-name"); // 建议用CSS类控制样式，比直接写style灵活
  
  // 3. 创建价格的span
  const priceSpan = document.createElement("span");
  priceSpan.textContent = `¥${productPrice}`;
  priceSpan.classList.add("product-price");

  // 4. 把两个span加到列表项里
  listItem.appendChild(nameSpan);
  listItem.appendChild(priceSpan);

  // 5. 把列表项加到容器里
  listContainer.appendChild(listItem);

  // 最后清空输入框
  productInput.value = "";
  priceInput.value = "";
});

额外补充： #

• 你的HTML结构要对应调整：把原来的<table>删掉，换成列表容器，比如<ul class="adding"></ul>或者<ol class="adding"></ol>
• 样式可以单独写CSS，比如：

  .product-name { margin-right: 15px; font-weight: 500; }
  .product-price { color: #27ae60; }
  li { margin: 8px 0; padding: 6px; border-bottom: 1px solid #eee; }
  

• 如果需要加删除功能，也可以在创建<li>的时候额外加个删除按钮，比如：

  // 在创建priceSpan之后加这段
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "删除";
  deleteBtn.classList.add("delete-btn");
  deleteBtn.addEventListener("click", () => listItem.remove());
  listItem.appendChild(deleteBtn);
  

这样修改后，每次点击添加按钮就会动态生成一个包含商品名和价格的列表项，完全符合你的要求～

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