代码之家 › 专栏 › 技术社区 › Riette du Toit

appendChild不起作用。Javascript新手

textnode appendchild javascript

Riette du Toit · 技术社区 · 13 年前

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

编辑: 在控制台中,我收到一个错误:Uncaught 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>

6 回复 | 直到 13 年前

MarcoK 13 年前

首先,删除元素,然后再尝试添加一些内容。由于它已被删除,因此在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 .

Grant Clements 13 年前

你的逻辑是错误的。

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

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

然后,您尝试将一个子节点附加到刚刚在此处删除的节点:

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

不能将元素附加到已不存在的元素中。如果您删除 removeChild 行,那么一切都应该正常。

此外,您的with block是错误的,您需要将其更改为:

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

在那之后,一切都应该好起来。

Andrei Nemes 13 年前

您正在删除此处的元素

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

然后尝试在这里使用它:

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

Chris Doggett 13 年前

您正在删除演示,然后尝试稍后引用它。看看这个jsFiddle,可以找到一种更干净的方法来做你看起来正在尝试的事情,即使在销毁p#演示之后也是如此。

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);

Dragos 13 年前

您正在删除 <p id="demo"> (由变量子项持有) 然后您正试图向该元素添加一个子元素(该元素已被删除)

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

删除此行: var element=document.getElementById("demo");
代替 element.appendChild(para); 具有 parent.appendChild(para);

一切都会正常工作。

Niet the Dark Absol 13 年前

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

将该块更改为:

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