HTML DOM insertBefore() 方法 | DOM 对象:HTML DOM 元素对象

返回到:DOM 对象:HTML DOM 元素对象

定义和用法

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

提示: 如果你想创建一个新的文本列表项,在 LI 元素后你应该添加元素的文本节点,然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。

所有主要浏览器都支持 insertBefore() 方法

语法

node.insertBefore(newnode,existingnode)

参数

参数类型描述
newnode节点对象必须。要插入的节点对象
existingnode节点对象必须。要添加新的节点前的子节点。

返回值

类型描述
节点对象你插入的节点/td>

技术细节

DOM 版本Core Level 1 Node Object

同一个列表中,改变列表项的顺序:

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

<p id="demo">单击该按钮改变列表项的顺序</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    var list=document.getElementById("myList");
    var node=list.getElementsByTagName("li");
    list.insertBefore(node[3],node[1]);
}
</script>

实例

列表中添加项:

<!DOCTYPE html>
<html>
	<title>Web176教程网(web176.com)</title>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="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><strong>注意:</strong><br>首先创建一个li节点,<br>然后创建一个文本节点,<br>然后添加文本节点的在li节点。<br>最后在第一个子节点列表插入li节点。</p>

</body>
</html>

移动某个列表项到另一个列表项:

<!DOCTYPE html>
<html>
	<title>Web176教程网(web176.com)</title>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>
<ul id="myList2"><li>Water</li><li>Milk</li></ul>
<p id="demo">单击该按钮将一个项目从一个列表移动到另一个列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var node=document.getElementById("myList2").lastChild;
	var list=document.getElementById("myList1");
	list.insertBefore(node,list.childNodes[0]);
}
</script>

</body>
</html>

作者:terry,如若转载,请注明出处:https://www.web176.com/javascriptbook/domtips/4420.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年12月10日 下午2:29
下一篇 2021年12月10日 下午2:34

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注