insertBefore()使用

最新推荐文章于 2025-06-29 23:21:47 发布

weixin_33955681

最新推荐文章于 2025-06-29 23:21:47 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/ochmdlc/blog/902665

本文介绍了如何使用insertBefore()方法在HTML列表中插入新项，并通过一个具体示例展示了如何创建新列表项并将其插入到现有列表项之前。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

向列表中插入一个项目：

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

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

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

document.getElementById("myList").insertBefore(newItem,existingItem);

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>insertBefore介绍</title>
	</head>

	<body>
		<ul id="uu">
			<li>这是第1个li</li>
			<li>这是第2个li</li>
			<li>这是第3个li</li>
		</ul>
		<button onclick="ss()">插入节点</button>

		<script>
			function ss() {
				var ul = document.getElementById("uu");
				var li4 = document.createElement("li");
				var li4text = document.createTextNode("这是第0个li");
				li4.appendChild(li4text);
				ul.insertBefore(li4, ul.firstChild)
			}
		</script>

	</body>

</html>

运行前