HOWTO · JavaScript

JavaScript 中在元素后插入

本文将帮助你使用 JavaScript 在元素之后添加元素。

作者 Shiv Kumar Yadav发布于 2022-05-05更新于 2024-02-15
本页内容

JavaScript 中的 DOM API 不允许在现有功能之后插入元素。按照以下步骤在 DOM 树中的现有元素之后放置一个元素。

  1. 首先，选择现有元素的父节点。
  2. 然后，在旧元素的下一个兄弟元素 (nextSibling) 之前 (insertBefore()) 插入新元素。

在 JavaScript 中使用 insertBefore() 方法添加元素

语法：

insertBefore(newNode, existingNode)

该过程有两个参数。新节点或新元素是第一个参数。

在新节点（元素）之前，将现有节点或元素放在第二个参数中。但是，我希望在元素之后添加新节点。这里有一个诡计。

假设我的页面上有两个部分元素，我想在第一个（部分）之后添加一个 r 元素（或任何其他元素）。

代码：

<!DOCTYPE html>
<html>
   <head>
      <style>
         * { font-family: Calibri; font-size: 20px; }
         section { border: solid 1px #ddd; padding: 10px; margin: 5px 0;}
         r { color: green; }
      </style>
   </head>
   <body>
      <h2>
         A new element is inserted after the "header" section using "insertBefore() method in JavaScript.
      </h2>
      <section id='header'>
         Head Section
      </section>
      <section id='footer'>
         Foot Section
      </section>
   </body>
   <script>
      let add_new_element = () => {
        let header = document.getElementById('header');
        let newElement = document.createElement('r');
        newElement.innerHTML = 'Content inside r element';
      
        header.parentNode.insertBefore(newElement, header.nextSibling);
      }
      add_new_element();
   </script>
</html>

运行代码

在我的网站上，我有页眉和页脚。我正在动态构建一个 r 元素，然后将其添加到第一部分或标题之后。

输出：

使用 insertBefore() 方法添加元素

在大多数情况下，insertBefore() 技术会将新的 r 元素放在标题元素之前。r 添加在标题部分之后。

在 JavaScript 中使用 insertAfter() 方法添加元素

让我们看另一个例子。逻辑通过 insertAfter() 函数演示。

function insertAfter(newNode, existingNode) {
  existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
}

假设你的列表上有以下项目。

<ul id="Fruits">
    <li>Apple</li>
    <li>Banana</li>
    <li>Coconut</li>
</ul>

在最后一个列表项之后，以下代码创建一个新节点。

let menu = document.getElementById('Fruits');
// creatING a new li node
let li = document.createElement('li');
li.textContent = 'Grapes';

// inserting a new node after the last list item
insertAfter(li, Fruits.lastElementChild);

它的工作原理如下。

  1. 首先，使用 getElementById() 函数通过其 id (Fruits) 选择 ul 元素。
  2. 使用 createElement() 方法创建一个新的列表项。
  3. 使用 insertAfter() 方法在最后一个列表项元素之后放置一个列表项元素。

完整代码：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>JavaScript insertAfter() Demo</title>
   </head>
   <body>
      <ul id="Fruits">
         <li>Apple</li>
         <li>Banana</li>
         <li>Coconut</li>
      </ul>
      <script>
         function insertAfter(newNode, existingNode) {
             existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
         }

         let menu = document.getElementById('Fruits');
         // creatING a new li node
         let li = document.createElement('li');
         li.textContent = 'Grapes';

         // inserting a new node after the last list item
         insertAfter(li,  Fruits.lastElementChild);
      </script>
   </body>
</html>

运行代码

输出：

使用 insertAfter() 方法添加元素

结论

insertAfter() 方法尚未在 JavaScript DOM 中实现。要将新节点作为父节点的子节点插入，请使用 insertBefore() 函数和 nextSibling 属性。

关于作者

Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

查看作者主页
LinkedIn