JavaScript向元素追加文本节点时报错的问题求助

控制台错误信息：

script.js:32 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at script.js:32:7

相关代码：

window.addEventListener("load",() =>{
const data = (new URL (document.location)).searchParams;
// 都是字符串类型
const title = data.get('title'); 
const desc = data.get('desc');
const date = data.get("date");
const PDF = data.get("pdf");
// 创建元素
const columns = document.createElement("div");
const worksheetCon=document.createElement("div");
const card = document.createElement("div");
const imageDiv = document.createElement("div");
const image = document.createElement("img");
const h1 = document.createElement("h1");
// 创建h1的文本节点，后续追加到h1
const h1Text = document.createTextNode(title);
const contain = document.createElement("div");
const p =document.createElement("p");
// 创建p的文本节点，后续追加到p
const Ptext = document.createTextNode(desc);
// 查看文本节点类型，显示是object
alert(typeof Ptext);
worksheetCon.className = "container-worksheets";
columns.className = "columns";
card.className = "carde";
imageDiv.className = "img";
contain.className = "contain";
worksheetCon.appendChild(columns);
columns.appendChild(card);
card.appendChild(imageDiv);
imageDiv.appendChild(image);
card.appendChild(h1);
h1.appendChild(h1Text)
card.appendChild(contain);
contain.appendChild(p);
p.appendChild(Ptext );
const worksheets = document.querySelector("worksheets");
worksheets.appendChild(card);
})

核心问题 #

报错的直接原因是const worksheets = document.querySelector("worksheets");这一行：

• 你使用"worksheets"作为选择器，它会尝试匹配名为<worksheets>的HTML标签，这类标签通常不存在，导致worksheets变量的值为null。
• 调用null.appendChild(card)时，null不是合法的Node类型，因此触发报错。

修复步骤 #

1. 修正选择器：根据目标元素的实际类型调整选择器：

   • 如果目标元素是ID为worksheets的元素，改成：const worksheets = document.querySelector("#worksheets");
   • 如果目标元素是class为worksheets的元素，改成：const worksheets = document.querySelector(".worksheets");

2. 可选优化：简化文本节点操作
   你不需要手动创建文本节点再追加，直接使用元素的textContent属性更简洁，还能避免潜在的空值问题：

   // 替换原来的h1Text创建和追加代码
   h1.textContent = title || '';
   // 替换原来的Ptext创建和追加代码
   p.textContent = desc || '';
   

   这样即使URL参数中没有获取到title/desc，也会设置为空字符串，不会出现"null"文本。

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