appendChild 不起作用。Javascript 新手
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15370522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
appendChild does not work. New to Javascript
提问by Riette du Toit
I'm new to JavaScript and I currently have an assignment. One question asks us to attach a new textNode to the <p>tag. But my appendChild doesn't want to work. All my other code works fine and does what it's supposed to. Obviously I am doing something wrong.
我是 JavaScript 新手，目前有一项任务。一个问题要求我们将一个新的 textNode 附加到<p>标签上。但是我的 appendChild 不想工作。我所有的其他代码都可以正常工作，并且可以完成它应该做的事情。显然我做错了什么。
EDIT:In my console I am receiving an error: Uncaught TypeError: Cannot call method 'appendChild' of null
编辑：在我的控制台中，我收到一个错误：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: "Why I am I here?"</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>
回答by MarcoK
First, you remove the element, and later on, you try to add something after that. Since it's removed, it can't be found in the DOM anymore.
首先，您删除元素，然后尝试在此之后添加一些内容。因为它被移除了，所以在 DOM 中再也找不到它了。
var child=document.getElementById("demo");
parent.removeChild(child);
var element=document.getElementById("demo"); // returns nothing, since it was removed
element.appendChild(para);
So, simply don't remove that element if you don't want to. JSFiddle demo.
因此，如果您不想，请不要删除该元素。JSFiddle 演示。
回答by Andrei Nemes
You are removing the element here
您正在此处删除元素
var child=document.getElementById("demo");
parent.removeChild(child);
and then trying to use it here:
然后尝试在这里使用它：
var element=document.getElementById("demo");
element.appendChild(para);
回答by Grant Clements
Your logic is wrong.
你的逻辑是错误的。
You remove the element called demo in these lines
在这些行中删除名为 demo 的元素
var child=document.getElementById("demo");
parent.removeChild(child);
You then try to append a child node to the node you've just removed here:
然后，您尝试将子节点附加到您刚刚在此处删除的节点：
var element=document.getElementById("demo");
element.appendChild(para);
You can't append an element to an element that no longer exists. If you delete the removeChildline, then everything should work.
您不能将元素附加到不再存在的元素上。如果删除该removeChild行，则一切正常。
Also, your with block is wrong, you need to change it to:
另外，您的 with 块是错误的，您需要将其更改为：
with(para.style){
color = "#FFF";
fontFamily = "Arial";
backgroundColor = "#345";
fontSize = "30px";
textAlign = "center";
width = "600px";
height = "200px";
padding = "20px";
margin = "0px auto";
};
After that, everything should be good.
在那之后，一切都应该是好的。
回答by Chris Doggett
You're removing demo, then trying to reference it later. See this jsFiddle for a cleaner way to do what you appear to be trying, even after destroying p#demo.
您正在删除演示，然后尝试稍后引用它。即使在破坏 p#demo 之后，请参阅此 jsFiddle 以更简洁的方式执行您似乎正在尝试的操作。
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);
回答by Dragos
You are removing the <p id="demo">(which is held by the variable child)
and then you are trying to add a child to this element (which is already removed)
您正在删除<p id="demo">（由变量 child 持有），然后您尝试向该元素添加一个孩子（已删除）
You can either not remove this element, or add the paraelement to parent
您可以不删除此元素，也可以将该para元素添加到parent
- remove this line:
var element=document.getElementById("demo"); - replace
element.appendChild(para);withparent.appendChild(para);
- 删除这一行：
var element=document.getElementById("demo"); - 替换
element.appendChild(para);为parent.appendChild(para);
and everything will work correctly.
一切都会正常工作。
回答by Niet the Dark Absol
Your withblock contains syntax errors, which is causing the script to not run at all.
您的with块包含语法错误，这导致脚本根本无法运行。
Change that block to this:
将该块更改为：
with(para.style) {
color = "#fff";
fontFamily = "Arial";
// and so on
}
