appendChild 不起作用。 Javascript 新手答案

【问题标题】：appendChild does not work. New to JavascriptappendChild 不起作用。 Javascript 新手
【发布时间】：2013-02-28 12:21:10
【问题描述】：

我是 JavaScript 新手，目前有一个任务。一个问题要求我们将一个新的 textNode 附加到 <p> 标签。但是我的 appendChild 不想工作。我所有的其他代码都可以正常工作，并且可以完成它应该做的事情。显然我做错了什么。

编辑： 在我的控制台中，我收到一个错误：Uncaught TypeError: Cannot call method 'appendChild' of null

<head>
<style type="text/css">
#demo {
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
background-color: #996;
height: 25px;
width: 400px;
padding: 20px;
}
</style>
</head>

<body>

<p id = "demo">Existential div asks: &quot;Why I am I here?&quot;</p>

<script>

document.title="Tag, you're it!";

var parent=document.body;
var child=document.getElementById("demo");
parent.removeChild(child);

var para=document.createElement("p");
var node=document.createTextNode("The quick brown fox jumps over the lazy dog.");
para.appendChild(node);

var element=document.getElementById("demo");
element.appendChild(para);


with(para){
color: "#FFF";
fontFamily : "Arial";
backgroundColor: "#345";
fontSize: "30px";
textAlign: "center";
width: "600px";
height: "200px";
padding: "20px";
margin: "0px auto";
};


</script>
</body>

【问题讨论】：

感谢更改。是的，我在控制台中遇到错误。忘记在主帖中提及。它说：“未捕获的 TypeError：无法调用 null 的方法 'appendChild'”
您正在删除该段落，因此var element = document.getElementById("demo"); 将失败。
我不想附加到“演示”。删除演示后，我创建了一个新元素“p”。然后我尝试将新的 textNode 附加到“p”。那么我应该将它从var element=document.getElementById("demo"); 更改为var element=document.getElementById("p") 吗？？

标签： javascript appendchild textnode

【解决方案1】：

您的 with 块包含语法错误，导致脚本根本无法运行。

将该块更改为：

with(para.style) {
    color = "#fff";
    fontFamily = "Arial";
    // and so on
}

【讨论】：

【解决方案2】：

首先，删除元素，然后尝试添加一些内容。由于它已被移除，因此在 DOM 中再也找不到它了。

var child=document.getElementById("demo");
parent.removeChild(child);

var element=document.getElementById("demo"); // returns nothing, since it was removed
element.appendChild(para);

因此，如果您不想删除该元素，请不要删除该元素。 JSFiddle demo.

【讨论】：

好的，我明白我做错了什么。但是我该如何解决呢？以下是来自作业的问题： 2.1 将文档标题更改为“标记，你就是它！” （这很成功） 2.2 通过访问 DOM 删除选择器 id 为“demo”的元素（帽子也成功了） 2.3 使用 javascript 创建一个新的段落元素“p”（我也是这样做的） 2.4 创建并附加一个textnode 到 2.3 中的元素，并带有以下文本：“快速棕色狐狸跳过懒狗。”
如果您只想显示文本（但不在 DOM 元素内），您只需将其附加到 document.body (Updated JSFiddle) 即可。

【解决方案3】：

您正在删除此处的元素

var child=document.getElementById("demo");
parent.removeChild(child);

然后尝试在这里使用它：

var element=document.getElementById("demo");
element.appendChild(para);

【讨论】：

【解决方案4】：

你的逻辑错了。

您删除了这些行中名为 demo 的元素

var child=document.getElementById("demo");
parent.removeChild(child);

然后您尝试将子节点附加到您刚刚在此处删除的节点：

var element=document.getElementById("demo");
element.appendChild(para);

您不能将元素附加到不再存在的元素。如果您删除 removeChild 行，那么一切都会正常。

另外，你的 with 块是错误的，你需要把它改成：

with(para.style){
    color = "#FFF";
    fontFamily = "Arial";
    backgroundColor = "#345";
    fontSize = "30px";
    textAlign = "center";
    width = "600px";
    height = "200px";
    padding = "20px";
    margin = "0px auto";
};

之后，一切都会好起来的。

【讨论】：

我的 with 没有被应用。即使有变化
抱歉，我的错误，您需要使用 = 而不是 :。我已经更新了我的答案以表明这一点。

【解决方案5】：

您正在删除演示，然后尝试稍后引用它。即使在销毁 p#demo 之后，请参阅此 jsFiddle 以获得更简洁的方式来执行您似乎正在尝试的操作。

http://jsfiddle.net/FzBrS/

document.title="Tag, you're it!";

var demo = document.getElementById("demo");
demo.parentNode.removeChild(demo);
var p = document.createElement("p");

document.body.appendChild(p);

var tn = document.createTextNode("The quick brown fox jumps over the lazy dog.");
p.appendChild(tn);

【讨论】：

【解决方案6】：

您正在删除 <p id="demo">（由变量 child 持有）然后您尝试向此元素添加一个子元素（已被删除）

您可以不删除此元素，也可以将para 元素添加到parent

删除此行：var element=document.getElementById("demo");
将element.appendChild(para); 替换为parent.appendChild(para);

一切都会正常工作。

【讨论】：

行得通！我现在唯一的问题是 with 语句中声明的样式没有被应用。
我不确定这里是否在正确的上下文中使用了 with()。
我宁愿在 var para=document.createElement('p') 之后使用 add 类似
para.style.color = '#fff'; <br/> para.style.fontFamily='Arial'; <br/> para.style.backgroundColor='#345'
等等等等
如果我能做到我会的，但我们得到的任务是明确说我们必须使用 with()