2

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

编辑： 在我的控制台中，我收到一个错误：未捕获的 TypeError：无法调用 null 的方法 'appendChild'

<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>
4

6 回答 6

3

首先，您删除该元素，然后，您尝试在此之后添加一些内容。由于它已被删除，因此无法再在 DOM 中找到它。

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

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

因此，如果您不想，就不要删除该元素。JSFiddle 演示。

于 2013-03-12T19:40:27.000 回答
2

您正在删除此处的元素

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

然后尝试在这里使用它：

var element=document.getElementById("demo");
element.appendChild(para);
于 2013-03-12T19:40:27.483 回答
2

你的逻辑是错误的。

您在这些行中删除名为 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";
};

在那之后，一切都应该很好。

于 2013-03-12T19:43:11.360 回答
1

您正在删除演示，然后尝试稍后引用它。即使在销毁 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);
于 2013-03-12T19:44:46.790 回答
1

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

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

  1. 删除这一行：var element=document.getElementById("demo");
  2. 替换element.appendChild(para);为parent.appendChild(para);

一切都会正常工作。

于 2013-03-12T19:54:16.350 回答
0

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

将该块更改为：

with(para.style) {
    color = "#fff";
    fontFamily = "Arial";
    // and so on
}
于 2013-03-12T19:37:57.167 回答