HTML | DOM before() 方法

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

句法：

ChildNode.before(Node or DOMString)

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

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

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

HTML

  

    
        HTML | DOM before() method
    

  

    
        GeeksforGeeks
        Child Node
    
      
    
        click to add
    
      
    
        // Get the parent element
        var parent = document.getElementById("div");
        console.log(parent)
  
        // Get the element to add before
        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.before(div);
        }
        console.log(parent.outerHTML);
    

  

输出：

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

元素之前插入了一个新节点。

• 点击按钮前：

  

• 点击按钮后：

  

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

HTML

  

    
        HTML | DOM before() method
    

  

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

  

输出：

• 点击按钮前：

  

• 点击按钮后：

  

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

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