电商网站appendChild失效：添加商品无法显示至首页

核心原因 #

1. 页面跳转导致DOM操作失效：在criar.html中通过appendChild添加的元素仅作用于当前页面DOM，点击确认按钮后跳转到index.html时，两个页面属于独立上下文，之前的DOM操作不会被带到新页面。
2. const变量赋值错误：nomeProdu等变量用const声明，无法直接重新赋值（如nomeProdu = ""），会触发语法报错。
3. 表单重置逻辑错误：试图清空变量而非输入框的实际值，输入框内容不会被正确重置。

解决方案 #

步骤1：用localStorage持久化存储商品数据 #

利用浏览器localStorage保存商品信息，在index.html加载时读取并渲染。

步骤2：修改criar.html的JS逻辑 #

阻止a标签默认跳转，存储数据后手动跳转：

const add = document.querySelector("#add");
const ancora = document.querySelector("#ancora");
const nomeInput = document.querySelector("#nome");
const priceInput = document.querySelector("#price");
const descInput = document.querySelector("#descrição");

add.addEventListener("click", (e) => {
    // 阻止a标签默认跳转
    e.preventDefault();

    const nomeProdu = nomeInput.value.trim();
    const price = priceInput.value.trim();
    const descriçao = descInput.value.trim();

    if(nomeProdu.length > 25) {
        alert("o nome está muito grande");
        nomeInput.value = "";
        return;
    }

    if(!nomeProdu || !price || !descriçao) {
        alert("Esta faltando informações do produto");
        nomeInput.value = "";
        priceInput.value = "";
        descInput.value = "";
        return;
    }

    // 读取现有商品数据
    let produtos = JSON.parse(localStorage.getItem("produtos")) || [];
    // 添加新商品
    produtos.push({ nome: nomeProdu, price, desc: descriçao });
    // 存回localStorage
    localStorage.setItem("produtos", JSON.stringify(produtos));

    // 手动跳转到首页
    window.location.href = "index.html";
})

步骤3：在index.html中添加渲染逻辑 #

修改scripts.js，页面加载时读取数据并渲染：

document.addEventListener("DOMContentLoaded", () => {
    const produtosList = document.querySelector(".produtos");
    const produtos = JSON.parse(localStorage.getItem("produtos")) || [];

    produtos.forEach(item => {
        const lista = document.createElement("li");
        lista.classList.add("produtosPub");
        
        lista.innerHTML = `<h2>${item.nome}</h2>
        <div class="detalhes">
            <h2>
                R$: ${item.price}
            </h2>

            <p>
                ${item.desc}
            </p>
        </div>`;
        
        produtosList.appendChild(lista);
    });
});

步骤4：修复HTML重复id问题 #

删除criar.html输入框中多余的空id属性（如<input id="nome" type="text" name="" id="" ...>），避免DOM选择异常。

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