insertBefore() 方法

最新推荐文章于 2025-04-04 16:14:45 发布

ssisse

最新推荐文章于 2025-04-04 16:14:45 发布

阅读量2.9k

点赞数 1

分类专栏： JavaScript

JavaScript 专栏收录该内容

99 篇文章

订阅专栏

XML DOM insertBefore() 方法

定义和用法

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

此方法可返回新的子节点。

语法：

insertBefore(newchild,refchild)

参数	描述
newchild	插入新的节点
refchild	在此节点前插入新节点

HTML DOM insertBefore() 方法

定义和用法

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

提示：如果您希望创建包含文本的新列表项，请记得创建文本节点形式的文本，以便追加到 LI 元素中，然后向列表插入这个 LI。

您也可以使用 insertBefore 方法插入/移动已有元素。

语法

node.insertBefore(newnode,existingnode)

参数

参数	类型	描述
newnode	Node 对象	必需。需要插入的节点对象。
existingnode	Node object	可选。在其之前插入新节点的子节点。如果未规定，则 insertBefore 方法会在结尾插入 newnode。

返回值

类型	描述
Node 对象。	您插入的节点。

实例：

<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表插入一个项目。</p>

<button οnclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)

var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>

<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>

</body>