如何使用 JavaScript 在某些元素之后添加元素答案

【问题标题】：How do you add an element after a certain elements using JavaScript如何使用 JavaScript 在某些元素之后添加元素
【发布时间】：2020-08-25 20:53:35
【问题描述】：

我想使用 JavaScript 在网页上的某个元素之后直接添加一个元素。

我还想在每次出现这个特定元素之后添加它。

【问题讨论】：

标签： javascript dom element

【解决方案1】：

使用Node.insertBefore() 和Document.querySelectorAll()。

假设您想在每个 div 之后添加一个元素 div，并使用类 .after-me：

const elements = document.querySelectorAll("div.after-me");

elements.forEach((e) => {
    const newNode = document.createElement("div");
    const nextSibling = e.nextSibling;
    if (nextSibling === null) {
        e.parentNode.appendChild(newNode);
    } else {
        e.parentNode.insertBefore(nextSibling, newNode);
    }
});

【讨论】：

【解决方案2】：

在 JavaScript 中你可以这样做

  <div></div>
  <div></div>
  <div></div>

  <script>
    let div = document.querySelectorAll("div");
    let para = document.querySelectorAll("div");    
    let p = document.createElement("p")

    div.forEach((d => {    
      d.append(p)
    }))

    para.forEach((p => {    
      p.append("Hello World")
    }))
 </script>

我们得到所有的<div>s，然后我们为每一个附加一个<p>，然后我们得到所有的<p>s，并为每一个附加单词hello world。

在 jQuery 中你可以这样做

  <div></div>
  <div></div>
  <div></div>

  <script
    src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
    crossorigin="anonymous"></script>
  <script>
    $( "div" ).append( "<p>Hello World</p>" );    
  </script>

这更短，因为 jQuery 找到所有 <div>s 并将 <p> 和文本全部附加在一行中

【讨论】：

querySelectorAll 是否适用于类名，事实证明我需要 getelemenybyclassname 并附加每个。
是的，您可以使用document.querySelectorAll(".yourClassNameHere") dot 和您的班级名称。或document.querySelectorAll("#yourIdNameHere")# 和您的ID 名称