`appendchild()` 失效通常是因为 javascript 在 dom 元素加载完成前就执行了查询操作，导致 `document.queryselector(".produtos")` 返回 `null`，进而调用 `appendchild()` 时抛出错误。本文将帮你定位并彻底解决这一常见问题。
你遇到的 appendChild() 无反应问题，并非方法本身失效，而是典型的 DOM 访问时机错误：你的 scripts.js 使用了 defer 属性（这是好的），但 JS 逻辑中直接执行了 document.querySelector(".produtos") 等 DOM 查询操作——而这些查询发生在 <script> 标签解析后、但目标页面（criar.html）尚未加载 .produtos 元素时。
⚠️ 关键事实：
- 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：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
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 = `
<h2>${nomeProdu}</h2>
<div class="detalhes">
<h2>R$: ${price}</h2>
<p>${descriçao}</p>
</div>
`;
produtos.appendChild(lista);
// 可选：清空表单 & 自动跳回首页
document.querySelector("#nome").value = "";
document.querySelector("#price").value = "";
document.querySelector("#descrição").value = "";
window.location.href = "index.html";
});
});2. 优化数据持久化（进阶建议）
当前方案存在明显缺陷：新添加的商品仅存在于内存中，刷新 index.html 后即消失。真实电商网站需持久化数据，推荐两种轻量级方案：
-
✅ 使用 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 = `<h2>${item.nome}</h2><div class="detalhes"><h2>R$: ${item.price}</h2><p>${item.descriçao}</p></div>`; produtos.appendChild(li); }); -
⚠️ 注意事项：
- 不要依赖 <a href="index.html"> 的默认跳转来“传递数据”——HTML 页面间无法直接共享 JS 变量；
- defer 保证脚本在 DOM 解析后执行，但不能替代对目标元素存在的运行时校验；
- 始终用 ?. 可选链和 || "" 防御性编程，避免 undefined 引发异常；
- 开发时务必打开浏览器开发者工具（F12 → Console），查看是否出现 Cannot read property 'appendChild' of null 类错误——这是诊断此类问题的第一线索。
通过以上调整，你的商品添加功能将稳定生效，并为后续扩展打下坚实基础。
