如何用JavaScript动态创建HTML标签实现购物车加购功能

数据老陈

2026-8-30

简易购物车加购功能问题排查与修正

现有代码问题点

下拉选框取值逻辑错误：document.getElementsByTagName("option")返回的是页面所有
内容渲染方式错误：document.write()方法在页面加载完成后调用时，会直接覆盖整个页面的原有内容，无法实现把商品追加到购物车区域的效果。
HTML笔误：猫零食选项的价格写了两个美元符号$$5.00；注释里狗零食的id拼写错误，HTML中对应id是dogTreats，注释里多写了一个s成了dogsTreats。

修正方案

1. 修正HTML笔误

把猫零食的选项修正为单美元符号即可：

<option id="catTreats">Cat Treats - $5.00</option>

2. 重写addToCart函数逻辑

不要用document.write，通过DOM创建元素的方式把选中的商品插入到购物车区域：

function addToCart() {
    // 直接获取下拉选择框，读取当前选中项的值
    const selectEl = document.getElementById("items");
    const selectedGoods = selectEl.value;

    // 拿到购物车容器
    const cartBox = document.getElementById("cart");
    // 创建p标签存储商品信息
    const goodsItem = document.createElement("p");
    goodsItem.textContent = selectedGoods;
    // 把新商品插入到价格统计行的上方，不破坏原有结算元素
    cartBox.insertBefore(goodsItem, document.getElementById("beforeTax"));
}