Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Interactive Web Pages with JavaScript Traversing and Manipulating the DOM with JavaScript Appending and Removing Elements

Saira Bottemuller
PLUS
Saira Bottemuller
Courses Plus Student 1,749 Points
Posted by Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

JS - appending a child element

I'm working on a Challenge requiring me to append a child (newParagraph) to a parent (body).

Anyone have an idea as to why this isn't working? I believe I followed the MDN syntax for appending a Child:

parentElementName.appendChild(newChildElementName);

But I keep getting an error from Treehouse that says "Oops! It looks like Task 1 is no longer passing."

So I went back to task one (of two), redid my work, and it said Well done! until I got to the next step, and it gave me the same error again.

app.js 
var body = document.body;
var newParagraph = document.createElement("p");
var pleaseEnableParagraph = document.querySelector("#please_enable");

//Remove "Please Enable JavaScript" paragraph

var body = this.parentNode;

var newParagraph = pleaseEnableParagraph.parentNode;

body.appendChild(newParagraph);

newParagraph.removeChild(pleaseEnableParagraph);

//Append new paragaph to document
index.html 
<!DOCTYPE html>
<html>
  <body>
    <p id="please_enable">Please Enable JavaScript</p>

    <script src="app.js"></script>
  </body>
</html>

4 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Saira,

You've got a lot going on that is unnecessary. It literally only wants you to remove the pleaseEnableParagraph paragraph from the body, and then append the new paragraph to the body, newParagraph. 

var body = document.body;
var newParagraph = document.createElement("p");
var pleaseEnableParagraph = document.querySelector("#please_enable");

//Remove "Please Enable JavaScript" paragraph
body.removeChild(pleaseEnableParagraph);

//Append new paragaph to document
body.appendChild(newParagraph);
Saira Bottemuller
PLUS
Saira Bottemuller
Courses Plus Student 1,749 Points
Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

@_@ that's what I get for being an overachiever lol :D OHHHH I see, I think I let it confuse me that "body" is the grandparent; so even though pleaseEnableParagraph is a grandparent to "body", you can still remove it directly from the grandparent node, it won't confuse the program or anything? (or just me haha!) That's pretty cool and useful.

So Marcus, you are a super helpful dude! I see you took a gold medal in a competition - tell me about that, it sounds awesome?!

Marcus Parsons
Marcus Parsons
15,719 Points

Haha yea body is the ancestor to all other DOM content elements, and so it's one of those "I brought you into this world and I can take you out!" kind of deals hahaha Anything that is within the body can be removed from the body by using that removeChild() method! It doesn't confuse the program at all :P

I like to be helpful :D I just freaking love to help haha I did a competition for Skills USA that pits various vocational schools against each other in head to head combat over the skills they've learned! haha At the State level, I had to fix the hardware on a computer that had suddenly failed. I had to do some software related stuff that I can't remember. I ended up going to Kansas City (which was a blast) for the National Skills USA championship, and I placed 15 out of 31. Now THAT was a tough competition! I had no idea what the f**k I was doing lol.

Saira Bottemuller
PLUS
Saira Bottemuller
Courses Plus Student 1,749 Points
Saira Bottemuller
Saira Bottemuller
Courses Plus Student 1,749 Points

NICE well you couldn't have done too badly - better than I would have. I live in Kansas City, I hope it treated you well! :) I saw on your profile that you were loooking for work - if you ever move out this way, I work for a great company who's always looking for good I.T. brains. We also have other locations and sister companies - nationwide and internationally, I just work at the HQ in KC. If you want to email me, I will get back with you on the name of the company and you can use me as a reference! :) I don't want to paste the name of the company here though and have 80 billion people that I don't know writing my name in the "Referral" line LOL :D :D :D I wish there was a way to send messages on here, I'd rather not post my email addy for security reasons. If you have facebook and want to add me, my name on there is Dawn Deschain (got myself into some trouble by having a big mouth and using my real name a while back). .

Marcus Parsons
Marcus Parsons
15,719 Points

Thank you, and I would definitely love to see about those opportunities, because I am looking for other work. I don't have Facebook :D I don't mind posting my email though so you can shoot me an email :P marcus.parsons@gmail.com.