Question

我无法理解为什么会收到此错误：

未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39;未定义的

这是我的代码：

//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);它可以正常工作。除了我不想在体内，而是在container_clause_1 div中。

我无法使用JQuery。＆＃34;为什么不＆＃34;与这个问题没有密切关系。我有我的理由。只是明白我不能使用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

为什么要＆＃34;记录。＆＃34;在这一行？

document.cClause1.appendChild(right_clause_1);

当然你只需要：

cClause1.appendChild(right_clause_1);

appendChild在一个新创建的div中

1 个答案: