HOWTO · JavaScript

JavaScript 中在元素後插入

本文將幫助你使用 JavaScript 在元素之後新增元素。

作者 Shiv Kumar Yadav發佈於 2022-05-05更新於 2023-10-12
本頁內容

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