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

在您发布的代码段中，您输入了错误的内容： .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>

Answer 2

您可以尝试以下代码


<!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方法在类内部生成标签p。

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

2 个答案: