如何通过填充另一数组实现数组更新并实时展示内容

你的代码中，遍历cart数组渲染页面的循环只在页面初始加载时执行了一次，此时cart是空数组，所以没有任何元素被渲染到页面。后续点击按钮将元素加入cart后，没有触发重新渲染的逻辑，因此页面不会展示新增的购物车项。

解决方法 #

把购物车的渲染逻辑抽成独立函数，每次修改cart数组后调用该函数，同时渲染前清空原有购物车的DOM元素，避免重复添加：

// 定义购物车渲染函数
function renderCart() {
    // 先清空之前的购物车元素（用专门的容器存放购物车项）
    const cartContainer = document.getElementById('cart-container');
    if (!cartContainer) return;
    cartContainer.innerHTML = '';

    // 遍历cart数组渲染元素
    for (let element of cart) {
        let p = document.createElement('p');
        p.innerText = `${element.id} + ${element.name} + ${element.status}`;
        cartContainer.appendChild(p);
    }
}

// 初始化商品列表（替换成你的实际数据）
const arr = [];
const cart = [];

// 创建购物车专属容器，方便后续操作
const cartContainer = document.createElement('div');
cartContainer.id = 'cart-container';
document.body.appendChild(cartContainer);

// 渲染初始商品列表
for (let element of arr) {
    let paragraph = document.createElement('p');
    paragraph.innerText = `${element.id} + ${element.name} + ${element.status}`;
    let button = document.createElement('button');
    button.innerText = 'Add to list';
    button.addEventListener('click', () => {
        if (!cart.includes(element)) {
            cart.push(element);
            // 添加元素后立即调用渲染函数更新页面
            renderCart();
        }
        console.log(cart);
    })
    paragraph.appendChild(button);
    document.body.appendChild(paragraph);
}

// 初始渲染空购物车
renderCart();

关键说明 #

1. 独立渲染函数：renderCart函数负责清空旧的购物车DOM并重新渲染新内容，确保cart数组的变化能同步到页面。
2. 购物车容器：新增带id的cart-containerdiv，专门存放购物车元素，避免和商品列表DOM混淆，也简化了清空操作。
3. 触发渲染时机：在点击按钮将元素加入cart后，立即调用renderCart()完成页面更新。

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