`appendchild()` 失效通常是因为 javascript 在 dom 元素加载完成前就执行了查询操作，导致 `document.queryselector(".produtos")` 返回 `null`，进而调用 `appendchild()` 时抛出错误。本文将帮你定位并彻底解决这一常见问题。
你遇到的 appendChild() 无反应问题，并非方法本身失效，而是典型的 DOM 访问时机错误：你的 scripts.js 使用了 defer 属性（这是好的），但 JS 逻辑中直接执行了 document.querySelector(".produtos") 等 DOM 查询操作——而这些查询发生在
⚠️ 关键事实：
- criar.html 中 根本没有 .produtos 元素（该元素只存在于 index.html 中）；
- 你的 JS 文件 scripts.js 同时被两个 HTML 页面引用，但其中的 add 按钮逻辑试图向 produtos（即首页的列表容器）添加内容；
- 当用户在 criar.html 页面点击“confirmar”时，JS 执行 document.querySelector(".produtos") —— 此时该选择器在当前页面中根本不存在，返回 null，后续 appendChild() 调用会静默失败（控制台报错：Cannot read property 'appendChild' of null）。
✅ 正确解决方案分两步：
1. 确保 DOM 就绪后再执行逻辑
使用 DOMContentLoaded 事件包裹初始化代码，避免过早访问 DOM：
document.addEventListener('DOMContentLoaded', () => {
const add = document.querySelector("#add");
const produtos = document.querySelector(".produtos");
// 仅当当前页面包含 .produtos（即 index.html）时才绑定事件
if (!add || !produtos) return; // 安全守卫：跳过不匹配的页面
add.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认跳转，确保 JS 逻辑优先执行
const nomeProdu = document.querySelector("#nome")?.value?.trim() || "";
const price = document.querySelector("#price")?.value?.trim() || "";
const descriçao = document.querySelector("#descrição")?.value?.trim() || "";
if (nomeProdu.length > 25) {
alert("O nome está muito grande");
return;
}
if (!nomeProdu || !price || !descriçao) {
alert("Está faltando informações do produto");
return;
}
// 创建新商品项
const lista = document.createElement("li");
lista.classList.add("produtosPub");
lista.innerHTML = `
${nomeProdu}
R$: ${price}
${descriçao}
`;
produtos.appendChild(lista);
// 可选：清空表单 & 自动跳回首页
document.querySelector("#nome").value = "";
document.querySelector("#price").value = "";
document.querySelector("#descrição").value = "";
window.location.href = "index.html";
});
});2. 优化数据持久化（进阶建议）
当前方案存在明显缺陷：新添加的商品仅存在于内存中，刷新 index.html 后即消失。真实电商网站需持久化数据，推荐两种轻量级方案：
盛世企业网站管理系统1.1.2
下载
免费 盛世企业网站管理系统(SnSee)系统完全免费使用，无任何功能模块使用限制，在使用过程中如遇到相关问题可以去官方论坛参与讨论。开源 系统Web代码完全开源，在您使用过程中可以根据自已实际情况加以调整或修改，完全可以满足您的需求。强大且灵活 独创的多语言功能，可以直接在后台自由设定语言版本，其语言版本不限数量，可根据自已需要进行任意设置；系统各模块可在后台自由设置及开启；强大且适用的后台管理支
-
✅ 使用 localStorage 保存商品列表（无需后端）：
// 保存商品 const produtosArray = JSON.parse(localStorage.getItem("produtos") || "[]"); produtosArray.push({ nome: nomeProdu, price, descriçao }); localStorage.setItem("produtos", JSON.stringify(produtosArray)); // 在 index.html 中读取并渲染（同样需 DOMContentLoaded） const savedProdutos = JSON.parse(localStorage.getItem("produtos") || "[]"); savedProdutos.forEach(item => { const li = document.createElement("li"); li.className = "produtosPub"; li.innerHTML = `${item.nome}
`; produtos.appendChild(li); });R$: ${item.price}
${item.descriçao}
-
⚠️ 注意事项：
- 不要依赖 的默认跳转来“传递数据”——HTML 页面间无法直接共享 JS 变量；
- defer 保证脚本在 DOM 解析后执行，但不能替代对目标元素存在的运行时校验；
- 始终用 ?. 可选链和 || "" 防御性编程，避免 undefined 引发异常；
- 开发时务必打开浏览器开发者工具（F12 → Console），查看是否出现 Cannot read property 'appendChild' of null 类错误——这是诊断此类问题的第一线索。
通过以上调整，你的商品添加功能将稳定生效，并为后续扩展打下坚实基础。
