DOM manipulation


#1

I am having some trouble using Javascript to add text to my webpage. I was wondering if anyone would mind looking over my code. I haven’t used Javascipt in this way before so I feel like I am missing some steps. I have linked to the javascript page and used the starting HTML and Javascript from the exercise and I cant get it to run from the very start.

<html>

<head> 
    <script type="text/javascript" src="test.js"></script>
</head>

<body>
    <h1>
        THE TITLE OF YOUR WEBPAGE
    </h1>

    <div id='container'>

    </div>



</body>
///My javascript

const container = document.querySelector('#container');

const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'This is the glorious text-content!';

const container = document.querySelector('#container')
const redp = document.createElement('p');
redp.textContent = 'Hey I\'m Red';
redp.style.color = "red";

container.body.appendChild(content);
content.body.appendChild(redp);

#2

You have a couple things going on…

First, the <script> tag should be right before the closing </body>. There are ways to keep it in the head, but for now put it at the end of the body.

The line const container = document.querySelector('#container') in the js file twice.

Also, the last two lines do not need body in them. For example, container.body.appendChild(content); should be container.appendChild(content);

Your code above is also missing the closing HTML tag, but I bet that happened when you copied & pasted your file.


#3

Thank you for helping me clean up the code.

I have tried any and all variations I can think of and even with your corrections I am still getting no output.

I am receiving the message “container is null” in the javascript console.

I get that message AFTER copying the excercise code from the DOM manipulation excercise word for word. Advise please.

My new code after editing is

<html>

<head> 
</head>

<body>
    <h1>
        THE TITLE OF YOUR WEBPAGE
    </h1>

    <div id='container'>

    </div>



    <script type="text/javascript" src="test.js"></script>
</body>

</html>

///JAVASCRIPT
const container = document.querySelector(’#container’);

const content = document.createElement('div');
content.classList.add('content');
content.textContent = 'This is the glorious text-content!';


const redp = document.createElement('p');
redp.textContent = 'Hey I\'m Red';
redp.style.color = "red";



container.appendChild(content);
content.appendChild(redp);

#4

I think you should invert at the end of your JS code the appendChild like this:

content.appendChild(redp);
container.appendChild(content);

First you add redp to content and finally to container.

Also, in your HTML code, you should use double quotation marks consistently throughout the HTML file. So, your div should be:

<div id="container"></div> 

I’m not sure this will fix your problem, but you’ll get closer to something working.


#5

I just copied & pasted your code into VS Code to check it out and the only thing that I see, is this line is using “fancy quotes”, not the normal single quote ' and is giving me an error. However, this could be because it is not inside the code block, because it looks correctly in the first code snippet.

Otherwise, once I fixed that line your code works just fine for me. I’m not sure what else could be causing that error.