создание нового элемента и добавление его в родительский элемент - PullRequest
Новая
       87

создание нового элемента и добавление его в родительский элемент

1 голос
/ 27 октября 2019

Я пытаюсь добавить новый абзац в документ, используя document.createElement. Это не работает для меня.

HTML-файл: 

<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.

Ответы [ 2 ]

1 голос
/ 27 октября 2019

Из фрагмента, который вы публикуете, вы ошиблись: .first.appendChild('newP');

Это должно было быть: document.getElementsByClassName('first')[0].appendChild(newP)

Попробуйте это: 

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>
0 голосов
/ 27 октября 2019

Вы можете попробовать код ниже 


<!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>

Кнопка сначала создаст тег p внутри класса с помощью метода appendChild.

...