为何JS中使用appendChild添加querySelector获取的元素时报错？

错误原因 #

你用document.querySelector(".list-item")获取不到目标元素，因为<template>标签里的内容默认不会被渲染到DOM树中，所以这个查询返回的是null。而appendChild要求传入的参数必须是有效的DOM节点，传入null就会触发这个报错。

关键概念补充 #

<template>是存储可复用DOM片段的容器，它的内容不会自动显示在页面上，必须通过JS克隆其content属性里的节点，才能插入到活跃的DOM树中。如果直接尝试获取template内部的元素，会因为元素不在DOM树中而返回null。

修正后的代码 #

const todoForm = document.getElementById("new-todo-form");
const list = document.getElementById("list");
const itemTemplate = document.getElementById("list-item-template");

todoForm.addEventListener("submit", (e) => {
    e.preventDefault();
    // 获取输入框内容并去除首尾空格
    const todoText = document.getElementById("todo-input").value.trim();
    if (!todoText) return; // 空内容不添加

    // 深度克隆template中的DOM片段
    const newItem = itemTemplate.content.cloneNode(true);
    // 填充待办事项文本
    newItem.querySelector("[data-list-item-text]").textContent = todoText;

    // 将新列表项添加到ul中
    list.appendChild(newItem);

    // 清空输入框
    document.getElementById("todo-input").value = "";
});

额外说明 #

• 使用cloneNode(true)进行深度克隆，确保每次提交都创建一个全新的列表项，避免出现"移动节点而非新增节点"的问题。
• 增加了空内容判断，防止添加空白的待办项。

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