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

Posted by shirshah sahel
shirshah sahel
10,035 Points

Not sure why line 4 is not right?

can anyone help with the line 4? Thanks,

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>

6 Answers

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

I see two issues:

  • you wrote "contentDIV" but the variable name is "contentDiv" (lower case "i" and "v")
  • don't enclose variable names (such as newParagraph) in quotes

Also, while not necessary for the challenge, it's good practice to end statements with a semicolon.

Graham Tonelli
Graham Tonelli
11,968 Points
Graham Tonelli
Graham Tonelli
11,968 Points

contentDIV.appendChild('newParagraph'); should be contentDIV.appendChild(newParagraph);

Since you are storing the data in a variable you do not need the quotes. When you use quotations the method is looking for a string argument.

Hope this helps, Cheers

HENRY BAREFOOT
HENRY BAREFOOT
8,380 Points
HENRY BAREFOOT
HENRY BAREFOOT
8,380 Points

the "p" must be lower case `const contentDiv = document.getElementById("content"); let newParagraph = document.createElement("p"); newParagraph.className = "panel"

contentDiv.appendChild(newParagraph) `

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

According to the MDN documentation page:

When called on an HTML document, createElement() converts tagName to lower case before creating the element.

And, in fact, the code shown passes the challenge with the capital "P" as is.

shirshah sahel
shirshah sahel
10,035 Points
shirshah sahel
shirshah sahel
10,035 Points

Thanks guys for the comments but contentDIV.appendChild(newParagraph); still didn't worked.

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

JavaScript is case-sensitive, so "contentDIV" is not the same as "contentDiv".

shirshah sahel
shirshah sahel
10,035 Points
shirshah sahel
shirshah sahel
10,035 Points

const contentDiv = document.getElementById("content"); let newParagraph= document.createElement('p'); newParagraph.className = "panel" contentDiv.appendChild(newParagraph); Thanks Parker, this is how I wrote it again but it gives me a syntax error on line 4.

Steven Parker
Steven Parker
241,488 Points
Steven Parker
Steven Parker
241,488 Points

I pasted that into the challenge and it passed for me.

But when posting code, always use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down: Or watch this video on code formatting.

shirshah sahel
shirshah sahel
10,035 Points
shirshah sahel
shirshah sahel
10,035 Points

Thank you Parker for all the answers and your time.