JS实现购物车追加商品而非替换原有内容的方法

当前加购后内容被覆盖，核心是两点：

• 购物车的<ul>容器内只提前写死了一组固定的<li>条目，每次加购都是直接修改这组固定条目的内容，新值会直接替换旧值
• 原逻辑没有设计“追加新条目”的步骤，仅针对固定的空标签做内容赋值，自然无法保留历史加购信息
  另外原代码存在重复ID的问题：多个商品卡片渲染时复用了相同ID，不符合HTML规范，后续容易出现DOM查询异常，修改时一并修复即可。

不需要改动现有商品渲染的整体逻辑，直接用insertAdjacentHTML方法往购物车列表尾部拼接新的条目HTML字符串即可，和你原来渲染商品列表用innerHTML拼接的逻辑一致，改造成本极低。
具体改动点：

• 删除原代码中提前获取固定购物车条目标签的逻辑，不需要提前绑定固定元素
• 加购时拿到当前商品信息后，直接往购物车<ul>的末尾插入新的商品条目HTML
• 新增购物车总计数变量，每次加购后同步更新顶部的商品总数
• 将商品卡片中重复的ID属性替换为class，修复HTML规范问题

修改后完整代码 #

JS部分 #

const Sheet = [
        {
            "Code": "A-0-1", 
            "UPC": "Photos/4009803054728.jpg",
            "Title": "U.S.S. Constitution",
            "Price": "$34",
            "InStock": "7"
        },
        // 可自行新增更多测试商品
        {
            "Code": "A-0-2", 
            "UPC": "Photos/test.jpg",
            "Title": "Test Goods",
            "Price": "$20",
            "InStock": "12"
        }
    ]
const productsEl = document.querySelector(".Sheet");
// 提前获取购物车列表容器和总计数元素
const cartListEl = document.querySelector(".itemUl ul");
const totalCountEl = document.getElementById("allNum");
let cartTotal = 0;

function getProducts() {
    Sheet.forEach((product) => {
        // 原重复ID替换为class，避免多元素ID冲突
        productsEl.innerHTML += `<div class="productContainer">
            <div class="img">
                <img src=${product.UPC} alt="Image Unavailable" height="170px" width="170px">
            </div>
            <div class="itemdesc">
                <h2 class="itemName">${product.Title}</h2>
                <h4 class="price"><span class="priceVal">${product.Price}</span></h4>
                <div class="desc">
                    <p class="itemCode">${product.Code}</p>
                </div>
                <div class="stock">
                    <p> ${product.InStock} Units</p>
            </div>
            <div class="addToCart" onclick="addToCart(this);">
                <button> Add to Cart</button>
            </div>
    </div>`; 
    })
}

getProducts(); 

function addToCart(button) {
    const parent = button.closest('.productContainer'),
    title = parent.querySelector('.itemName').innerText,
    price = parent.querySelector('.priceVal').innerText,
    code = parent.querySelector('.itemCode').innerText;

    // 直接在购物车列表尾部插入新条目，无需createElement
    cartListEl.insertAdjacentHTML('beforeend', `
        <li>Units: 1</li>
        <li>Item: ${title} ${code}</li>
        <li>Price: ${price}</li>
        <li style="list-style: none; border-bottom: 1px solid #eee; margin: 8px 0;"></li>
    `)

    // 更新购物车总商品数
    cartTotal += 1;
    totalCountEl.innerText = cartTotal;
}

HTML部分 #

原有结构基本保留，只需要把<ul>里提前写死的空li删掉即可，不需要额外调整结构：

<div class="Sheet"></div>
<div class="cartContainer">
    <div class="cart">
        <h3>Cart: <span id="allNum">0</span></h3>
    </div>
    <div class="itemUl">
        <ul>
            <!-- 加购时自动追加条目，无需提前写固定li -->
        </ul>
    </div>
</div>

改造完成后，每次点击Add to Cart按钮，都会在购物车已有内容的下方追加当前选中商品的单位、名称编码、价格信息，不会覆盖之前添加的商品内容，同时顶部购物车计数会同步累加。如果后续需要加数量调整、删除条目、总价计算功能，直接在插入的条目HTML里加对应元素和逻辑即可。

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