CODEWITHSUNDEEP
appendchildcreateelement
Jevon Cochran
Jevon Cochran

Reputation: 1774

creating new element and adding it to parent element

I'm trying to add a new paragraph to a document using document.createElement. It's not working for me.

HTML file:

<section class="first">
    <h2>Properties Tutorial</h2>
    <p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
      else entirely. Legend, Mr Wayne.</p>
    <h2 class="second-heading">I am the DOM</h2>
    <p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
    <img class="custom-img" src="" alt="Kitty image" />
  </section>

JS file:
const newP = document.createElement('p');
.first.appendChild('newP');
newP.textContent = 'Say my name!';

console.log(newP);

I expect for the element to be created with document.createElement, text to be added with element.textContent and for the element to be added to the children of the section with class of "first" through the appendChild method.

Upvotes: 1

Views: 198

Answers (2)

Kenan Balija
Kenan Balija

Reputation: 703

From the snippet you post, you mistyped: .first.appendChild('newP');

It should have been: document.getElementsByClassName('first')[0].appendChild(newP)

Try this:

const newP = document.createElement('p');
newP.innerHTML = 'Say my name!'
document.getElementsByClassName('first')[0].appendChild(newP);
<section id="first" class="first">
    <h2>Properties Tutorial</h2>
    <p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become something
      else entirely. Legend, Mr Wayne.</p>
    <h2 class="second-heading">I am the DOM</h2>
    <p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
    <img class="custom-img" src="" alt="Kitty image" />
  </section>

Upvotes: 1

meotig
meotig

Reputation: 76

you can try below code


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<section class="first">
    <h2>Properties Tutorial</h2>
    <p>No, no, no. A vigilante is just a man lost in scramble for his own gratification. He can be destroyed or locked up. But if you make yourself more than just a man, if you devote yourself to an ideal and if they can't stop you then you become somethingelse entirely. Legend, Mr Wayne.</p>
    <h2 class="second-heading">I am the DOM</h2>
    <p>You know what you said about the structures becoming shackles. You were right and I can't take it, the injustice. I mean, no one ever's gonna know who saved the entire city.</p>
    <img class="custom-img" src="" alt="Kitty image" />
</section>
<button id="add">Add Paragraph</button>
<script type="text/javascript">

    var first = document.getElementsByClassName('first')[0],
    add = document.getElementById('add');

    add.onclick = function(){
        var p = document.createElement('p');
        p.textContent = "Say my name!";
        first.appendChild(p);
    }

</script>
</body>
</html>

The button will produce tag p inside class first with appendChild method.

Upvotes: 0

Related Questions