HTML | DOM after() 方法

after() 方法用于在 ChildNode 的父节点的 children 列表中插入一组 Node 对象或HTML DOMString 对象。该元素插入在我们提到的 ChildNode 之后。

句法：

ChildNode.after(Node or DOMString)

参数：此方法接受如上所述和如下所述的单个参数：

• 节点：它是一组必须插入到 ChildNode 之后的Node对象或HTML DOMString 对象。

示例 1：在此示例中，我们将在子元素之后向 DOM 插入一个元素节点。

HTML

  

    
        HTML | DOM after() Method
    

  

    
        GeeksforGeeks
        Child Node
    
      
    click to add
    
        // Get the parent element
        var parent = document.getElementById("div");
        console.log(parent);
  
        // Get the element to add after
        var para = document.getElementById("p");
  
        // Function to add the element
        function add() {
  
            // Create a new element to add
            const div = document.createElement("div");
            div.innerHTML = "<h4>new node</h4>";
  
            // Insert the created element
            para.after(div);
        }
        console.log(parent.outerHTML);
    

  

输出：

在输出中，可以看到点击按钮后，在

元素的子元素之后插入了一个新节点。

• 点击按钮前：

  

• 点击按钮后：

  

示例 2：在此示例中，我们将在子节点之后插入一些文本。

HTML

  

    
        HTML | DOM after() Method
    

  

    
        GeeksforGeeks
        Child Node
    
  
    
        click to add
    
      
    
        // Get the parent element
        var parent = document.getElementById("div");
        console.log(parent)
  
        // Get the element to add after
        var para = document.getElementById("p");
  
        // Function to add the element
        function add() {
  
            // Insert a text element
            // after this element
            para.after("Text Added");
        }
        console.log(parent.outerHTML);
    

  

输出：

• 点击按钮前：

  

• 点击按钮后：

  

支持的浏览器： DOM after() 方法支持的浏览器如下：

• 谷歌浏览器
• 边缘
• 火狐
• 歌剧