Question

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

我也想在每次出现此特定元素后添加它。

Answer 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);
    }
});

Answer 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>，然后为每个添加一个<p>，然后得到所有<p>，为每个添加一个问候世界。

在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>，并将<p>和文本全部附加在一行中

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

2 个答案: