JavaScript 中在元素后插入

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中在元素后插入

作者：迹忆客最近更新：2023/03/10 浏览次数：

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

在 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);

它的工作原理如下。

完整代码：

<!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>