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

用法:

ChildNode.before(Node or DOMString)

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

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

new node

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

谷歌浏览器

Edge

Firefox

Opera

html before添加图片,HTML DOM before()用法及代码示例相关推荐

html焦点试图代码,HTML DOM focus()用法及代码示例
DOM focus()方法用于为元素赋予焦点,并借助blur()方法删除焦点.我们可以将焦点放在任何元素上,并通过执行一些操作来启用它.例如,我们可以通过单击按钮将焦点放在某些文本上. 用法: Obj ...
html dom的nodetype值介绍,HTML DOM nodeType用法及代码示例
DOM nodeType属性用于查找我们要引用的节点的类型.特定节点的类型以数字形式返回. DOM nodeType属性是一个只读属性. 返回值:它根据节点的类型返回一个数值. 1:如果node是元素 ...
html+dfn标签,HTML DOM DFN用法及代码示例
DOM DFN对象用于表示HTML 标签. getElementById()访问DFN元素. 用法: document.getElementById("ID"); 其中" ...
iframe展示html源代码,HTML DOM IFrame用法及代码示例
HTML DOM中的IFrame对象属性用于创建和访问对象中的元素.内联框架用于将另一个文档嵌入当前HTML文档中. 用法: 它用于访问元素.var x = document.getElementBy ...
html 精美list,HTML DOM DList用法及代码示例
DOM DList对象用于表示HTML 用法: document.getElementById("ID");< 其中"id"是分配给"dl&qu ...
html dom.parent,HTML DOM offsetParent用法及代码示例
在HTML中,offsetParent属性用于返回元素的最接近的祖先.返回的祖先的位置必须不是静态的.如果将元素设置为display =" none",则offestParent属 ...
html parent()属性,HTML DOM parentElement用法及代码示例
DOM parentElement属性用于返回特定子元素的父元素.这是一个只读属性. parentElement和parentNode属性相似,唯一的区别是,如果父节点不是元素,则parentElem ...
html table clonenode,HTML DOM cloneNode()用法及代码示例
DOM cloneNode()方法用于复制或克隆在其上调用cloneNode()方法的节点.例如,可以使用此方法将列表项从一个列表复制到另一个列表. 用法: yourNode.cloneNode([d ...
html中offsetleft属性,HTML DOM offsetLeft用法及代码示例
DOM offsetLeft属性用于返回像素的左位置.此位置相对于offsetParent元素的左侧. 用法: element.offsetLeft 返回值:它返回以像素为单位表示元素左侧位置的数字. ...

html before添加图片,HTML DOM before()用法及代码示例

GeeksforGeeks

new node

GeeksforGeeks

html before添加图片,HTML DOM before()用法及代码示例相关推荐

最新文章

热门文章