Manipulating DOM with JavaScript

Question

The code below is supposed to add a p element to my document, add text to this element, and change the font color of the element to red.

This is for a class. I have been working on this for two hours but am stumped.

<!DOCTYPE html>
<html>

    <body>

      <h1 id='demo'>
        THE TITLE OF YOUR WEBPAGE
      </h1>
      <div id="container">
        <div class="content">
          This is the glorious text-content!
        </div>
      </div>


    </body>
    <script>
    const p = document.createElement('p');
    p.textContent = 'Hey, I'm red.';
    p.style.color = 'red';
    div.content.appendChild('p');

    </script>

</html>

The code doesn't produce the desired results. Can any of you help me understand what I am missing?

Well the first thing you might notice in the syntax highlighting is that you've included a single quote within a single-quote string. You should do "Hey I'm red.", using double quotes instead. Also, div is not defined. Your code has no idea what div is. You'll need to tell it that you want an element on the page by doing something like document.getElementById("container"). — Tyler Roper
– Tyler Roper, Commented Nov 17, 2018 at 4:07
Its look you forget getting div with id content dom reference. Plase try `document.getElementById('content').appendChild(p) — Mario
– Mario, Commented Nov 17, 2018 at 4:46

brk · Accepted Answer · 2018-11-17 04:14:42Z

1

Here 'Hey, I'm red.'; , you need to escape the quote before 'm by using back slash or else you can put inside double quotes.

Beside div.content.appendChild('p'); here div need to a be a target which you can get bus using the document.getElementById & inside appendChild you need to pass p as a variable

const p = document.createElement('p');
p.textContent = 'Hey, I\'m red.';
p.style.color = 'red';
document.getElementById('container').appendChild(p);

<h1 id='demo'>
  THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
  <div class="content">
    This is the glorious text-content!
  </div>
</div>

answered Nov 17, 2018 at 4:14

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2018-11-17 04:54:07Z

You have few issues in your code:

The textContent you are using ('Hey, I'm red.') is not valid.

You can use double quotes to surround the whole string so that you can use single quotes inside the string like "Hey, I'm red.".

OR: you can escape the inner quotes with back slash (\) like 'Hey, I\'m red.'

OR: You can use Template Literals wrapping the string with back tick like:
```
`Hey, I'm red.`
```
You have to use document.getElementById() to target the element.
You also have to remove the quotes around the variable p in appendChild('p'), other wise the quotes treat that as string not variable:

const p = document.createElement('p');
p.textContent = "Hey, I'm red.";
p.style.color = 'red';
document.getElementById('container').appendChild(p);

<h1 id='demo'>
  THE TITLE OF YOUR WEBPAGE
</h1>
<div id="container">
  <div class="content">
    This is the glorious text-content!
  </div>
</div>

Collectives™ on Stack Overflow

Manipulating DOM with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related