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 JavaScript and the DOM (Retiring) Making Changes to the DOM DOM Manipulation

Nicholas Wallen
Nicholas Wallen
12,278 Points
Posted by Nicholas Wallen
Nicholas Wallen
12,278 Points

This was never explained....

IF the answer to task three is:

contentDiv.appendChild(newParagraph);

Is someone going to bother explaining how we came up with contentDiv versus just div? No where in this course was it explained how we can randomly mash those two words together.

app.js 
const contentDiv = document.getElementById("content");
let newParagraph = document.createElement('p');
newParagraph.className = "panel";
contentDiv.appendChild(newParagraph);
index.html 
<!DOCTYPE html>
<html>
    <head>
        <title>DOM Manipulation</title>
    </head>
    <link rel="stylesheet" href="style.css" />
    <body>
        <div id="content">

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

1 Answer

Eric M
Eric M
11,546 Points
Eric M
Eric M
11,546 Points

Hi Nicholas,

If you look at this course "JavaScript and the DOM" in the context of the "Beginning JavaScript" track it's the fifth course. In the second course, "JavaScript Basics", there is an extensive section on variables.

contentDiv is a variable. The const keyword is similar to the let or var keywords with the difference being the contents of the variable cannot be mutated. It has to stay constant.

contentDiv is not a builtin JavaScript or HTML keyword. It's defined by the programmer.

const contentDiv = document.getElementById("content"); and let newParagraph = document.createElement('p'); both declare variables. The first named contentDiv, which cannot change, and the second newParagraph which can change.

So, contentDiv is just so we can easily reference document.getElementById("content") without having to type all of that out each time.

If you're ever unsure about something, consider looking up each part of the line you're unsure of in the MDN, it's a great resource! Or rewatch the Treehouse videos. I find myself rewatching them at various times, the speedup feature and transcripts are great for reviewing things you've already covered.

Happy coding!

Eric

Eric M
Eric M
11,546 Points
Eric M
Eric M
11,546 Points

Haha don't worry about it Nicholas!

I assure you that even professional programmers make dumb mistakes all the time.

I have spent hours debugging because I mixed up plus and minus, or forgot a comma, all sorts of things.

If anything programming is an activity where you alternate between feeling like a superstar and an idiot at random moments, often quite close together!