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

Lu Favela
seal-mask
.a{fill-rule:evenodd;}techdegree
Lu Favela
Front End Web Development Techdegree Student 15,570 Points
Posted by Lu Favela
.a{fill-rule:evenodd;}techdegree
Lu Favela
Front End Web Development Techdegree Student 15,570 Points

Can someone help understand?

Im not sure if im creating a class correctly. can someone help with this line of code?

app.js 
var contentDiv = document.getElementById('content');
var newParagraph = document.createElement('p');
newParagraph.ClassName = 'panel' ;
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>

3 Answers

Dmitry Polyakov
Dmitry Polyakov
4,989 Points
Dmitry Polyakov
Dmitry Polyakov
4,989 Points

className starts with a small letter

newParagraph.className = 'panel' ;

Maxwell Newberry
Maxwell Newberry
7,693 Points
Maxwell Newberry
Maxwell Newberry
7,693 Points

To add to this, this style of naming convention is commonly referred to as camel casing. There are other naming conventions that are often used such as snake casing which use underscores between words like_so. These styles are oftentimes referred as different things depending on the developer.

Although there are no required naming conventions for most languages, depending who you ask, a lot of developers have a preference of when to use camel casing versus snake casing in one language versus the next.

A lot of the commonly used languages such as Javascript are case sensitive, so whatever casing name convention you choose, you will need to use the same casing to reference it later on.

Dmitry Polyakov
Dmitry Polyakov
4,989 Points
Dmitry Polyakov
Dmitry Polyakov
4,989 Points

Another way to handle classes is classList method

2 examples below show how to add and how to remove classes

newParagraph.classList.add("panel") ;

newParagraph.classList.remove("panel") ;