使用 javascript 在正文的第一段之前插入一个新的 h3 元素答案

【问题标题】：Insert a new h3 element before the first paragraph in the body using javascript使用 javascript 在正文的第一段之前插入一个新的 h3 元素
【发布时间】：2021-06-18 19:19:42
【问题描述】：

我只想通过使用 javascript 在 HTML 的第一段之前插入一个新的 h3 元素，其中包含我的名字。我不想为它编辑 HTML 文件或 CSS 文件。我已经在 javascript 文件中尝试过这段代码

let h3e = document.createElement("h3");
h3e.textContent("Student Name");
document.body.insertBefore(h3e, document.body.firstChild);

但它不起作用

let h3e = document.createElement("h3");
h3e.textContent("Student Name");
document.body.insertBefore(h3e, document.body.firstChild);

<body>
      <header>
        <h1>Bumblebee</h1>
      </header>

      <main>
        <h2>General description</h2>

        <figure><img src="bee1.jpg" />
          <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
          </figcaption>
        </figure>

        <p>Bumblebees vary in o about 40 mm longginger beast".</p>

          <h2>Distribution and habitat</h2>

    <p>Test data</p>
</body>

【问题讨论】：

如果你查看开发控制台，你会看到一个错误。错误是 h3e.textContent 不是函数。您应该只分配给它而不是调用它。即h3e.textContent ="Student Name";.
我希望“学生姓名”显示在
大黄蜂在 o 约 40 毫米长的野兽中变化。
标签
您只需要使用document.querySelector('p')找到段落节点并在此之前插入。不过，您的示例中未关闭的
标记可能会导致问题。
var h3e = document.createElement("H3"); var t = document.createTextNode("学生姓名"); h3e.appendChild(t); document.body.insertBefore(h3e, document.querySelector("main > p") );查询选择器不起作用。

标签： javascript

【解决方案1】：

就那样做吧

let p = document.getElementsByTagName('p')[0]
p.outerHTML = '<h3>Student Name</h3>' + p.outerHTML

【讨论】：

试过了 let h3e = document.createElement("H3");让 t = document.createTextNode("学生姓名"); h3e.appendChild(t);让 ptag = document.getElementsByTagName('p'); document.body.insertBefore(h3e, ptag);
复制上面的代码，在浏览器控制台试试

【解决方案2】：

你的问题来了

h3e.textContent("Student Name");

// Error msg: "Uncaught TypeError: h3e.textContent is not a function",

改成

var t = document.createTextNode("Student Name");
h3e.appendChild(t);

或者正如@Paul Rooney 的评论：

h3e.textContent ="Student Name";

完整代码和演示在这里：

var h3e = document.createElement("H3");
var t = document.createTextNode("Student Name");
h3e.appendChild(t);

document.body.insertBefore(h3e, document.body.firstChild);

<body>
      <header>
        <h1>Bumblebee</h1>
      </header>
      <main>
        <h2>General description</h2>
        <figure><img src="bee1.jpg" />
          <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
          </figcaption>
        </figure>
        <p>Bumblebees vary in o about 40 mm longginger beast".</p>
          <h2>Distribution and habitat</h2>
    <p>Test data</p>
</body>

详细阅读此主题： TextNode or textContent?

【讨论】：

【解决方案3】：

要在段落之后插入，您需要在段落节点的直接父节点上调用insertBefore 方法。所以它不是你想要调用它的document，而是main 元素。注意：在您的示例中，主标签未关闭。如果你拿走了主节点，那么你可以使用document.insertBefore，因为文档是段落的直接父级。

因此，要使用上面的示例，您可以如下所示进行。我在插入元素之前和之后添加了一个时间延迟来显示它。

<html>
    <body>
        <header>
          <h1>Bumblebee</h1>
        </header>      
        <main>
          <h2>General description</h2>      
          <figure><img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/a8/Xylocopa_bee1.jpg/300px-Xylocopa_bee1.jpg" />
            <figcaption>A common bumblebee extending its tongue towards a Heuchera inflorescence.
            </figcaption>
          </figure>      
          <p>Bumblebees vary in o about 40 mm longginger beast".</p>      
            <h2>Distribution and habitat</h2>
        </main>
      <p>Test data</p>
  </body>
  <script>
    setTimeout(() => {
        const h3e = document.createElement("h3");
        h3e.textContent ="Student Name";
        const mainElem = document.querySelector('main');
        const paragraph = mainElem.querySelector("p");
        mainElem.insertBefore(h3e, paragraph);
     }, 1000);
  </script>
</html>

您可能希望查看其他答案 wrt wrt best practice for setting text in the h3 节点。

另一种可能更可靠的方法是在 paragraph 节点的父节点上调用 insertBefore。

例如

paragraph.parentNode.insertBefore(h3e, paragraph);

【讨论】：