appendChild does not work. New to Javascript
Question
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.
EDIT: In my console I am receiving an error: 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>
6 answers
solution1
3 2013-03-12 19:40:27
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.
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 .
solution2
2 2013-03-12 19:40:27
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);
solution3
2 ACCPTED 2013-03-12 19:43:11
Your logic is wrong.
You remove the element called demo in these lines
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 removeChild line, then everything should work.
Also, your with block is wrong, you need to change it to:
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.
solution4
1 2013-03-12 19:44:46
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.
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);
solution5
1 2013-03-12 19:54:16
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)
You can either not remove this element, or add the para element to parent
- remove this line:
var element=document.getElementById("demo"); - replace
element.appendChild(para);withparent.appendChild(para);
and everything will work correctly.
solution6
0 2013-03-12 19:37:57
Your with block contains syntax errors, which is causing the script to not run at all.
Change that block to this:
with(para.style) {
color = "#fff";
fontFamily = "Arial";
// and so on
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.