javascript - appendChild 在新创建的 div 中

Question

我不明白为什么会出现此错误:

Uncaught TypeError: Cannot read property 'appendChild' of undefined

这是我的代码:

//create new div element, append it to the body, give it an ID and a Class.
const container_clause_1 = document.createElement("div");
document.body.appendChild(container_clause_1);
container_clause_1.setAttribute("id", "container_clause_1");
container_clause_1.classList.add("cc1");

console.log(container_clause_1);
//returns <div id="container_clause_1" class="cc1></div>"

const cClause1 = document.getElementById("container_clause_1");

console.log(cClause1);
//returns <div id="container_clause_1" class="cc1></div>"

const right_clause_1 = document.createElement("div");
console.log(right_clause_1); //returns <div></div>

document.cClause1.appendChild(right_clause_1); //Error occurs here!

我不明白在这种情况下什么是未定义的。 cClause1 已定义。 right_clause_1 也被定义。诚然，此时它是一个空的 div，但这正是我想要做的 - 添加 div，然后我可以添加类和 ID 等。

此外，我没有看到任何拼写错误。

此外，如果我替换 document.cClause1.appendChild(right_clause_1); 使用 document.body.appendChild(right_clause_1); 它工作正常。除了我不希望它在 body 内，而是在 container_clause_1 div 内。

我不能为此使用 JQuery。 “为什么不”与这个问题并不密切相关。我有我的理由。只知道我不能使用 JQuery。

---

嗯，这太明显了——在每个人都开始指出我做错了什么之后!感谢您的回答!

这是向我指出的另一件事:

我可以消除变量 cClause 并只使用 container_clause_1

所以我的代码更短了!

const container_clause_1 = document.createElement("div");
document.body.appendChild(container_clause_1);
container_clause_1.setAttribute("id", "container_clause_1");
container_clause_1.classList.add("cc1");

const right_clause_1 = document.createElement("div");
container_clause_1.appendChild(right_clause_1);
right_clause_1.setAttribute("id", "right_clause_1");
right_clause_1.classList.add("r1");

Answer 1

为什么要有"file"。在这一行？

document.cClause1.appendChild(right_clause_1);

当然你只需要:

cClause1.appendChild(right_clause_1);