after图片 html,HTML DOM after()用法及代码示例

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

用法:

ChildNode.after(Node or DOMString)

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

nodes:它是必须在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 = "

new node

";

// 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()方法支持的浏览器：

谷歌浏览器

Edge

Firefox

Opera