创建新元素并将其添加到父元素

Question

我正在尝试使用 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.

Answer 1

你可以试试下面的代码


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

按钮会先用appendChild方法在class里面生成tag p。

Answer 2

在您 post 的片段中，您输错了： .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>

创建新元素并将其添加到父元素

creating new element and adding it to parent element

appendchild

createelement