当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML DOM after()用法及代码示例


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

用法:

ChildNode.after(Node or DOMString)

参数:此方法接受上述和以下描述的单个参数:

  • nodes:它是必须在ChildNode之后插入的一组Node对象或HTML DOMString对象。

范例1:在此示例中,我们将在子元素之后将元素节点插入DOM。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM after() Method 
    </title> 
</head> 
  
<body> 
    <div id="div"> 
        <h1>GeeksforGeeks</h1> 
        <p id="p">Child Node</p> 
    </div> 
      
    <button onclick="add()">click to add</button> 
    <script> 
        // 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); 
    </script> 
</body> 
  
</html>

输出:



在输出中,可以看到单击按钮之后,在<p>元素的子元素之后插入了一个新节点。

  • 单击按钮之前:

  • 单击按钮后:

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM after() Method 
    </title> 
</head> 
  
<body> 
    <div id="div"> 
        <h1>GeeksforGeeks</h1> 
        <p id="p">Child Node</p> 
    </div> 
  
    <button onclick="add()"> 
        click to add 
    </button> 
      
    <script> 
        // 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); 
    </script> 
</body> 
  
</html>

输出:

  • 单击按钮之前:

  • 单击按钮后:

支持的浏览器:下面列出了DOM after()方法支持的浏览器:

  • 谷歌浏览器
  • Edge
  • Firefox
  • Opera




相关用法


注:本文由纯净天空筛选整理自taran910大神的英文原创作品 HTML | DOM after() Method。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。