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