操作DOM树之在指定位置处添加标签_在指定元素下添加标签-优快云博客

本文介绍了如何在HTML的ul列表中，针对某个特定li元素之前插入新的li标签。主要步骤包括创建新li，设置文本内容，找到目标ul，最后使用insertBefore方法实现插入操作。

问题描述：

在ul标签内的某一个li标签前面添加另一个li标签

问题分析：

1.首先需要获取到要添加的li标签

2.然后新建一个li标签

3.新建一个文本节点，将文本节点添加到新建的li标签内

4.因为要在ul标签内添加，所以获取ul标签

5.将新建的li标签添加到ul标签内，<li id="li23">貂蝉</li>之前。

使用的方法是：ul11.insertBefore(li25,li23);


<html>
   <head>
    <title>html示例</title>
   </head>
   <body>
   	<ul id="ul11">
		<li id="li21">西施</li>
		<li id="li22">王昭君</li>
		<li id="li23">貂蝉</li>
		<li id="li24">杨玉环</li>
	</ul>
   	<input type="button" value="insert" onclick="insert1();">
    <script type="text/javascript">
		function insert1(){
				/*
				问题分析：
				1.首先需要获取到li标签
				2.新建一个li标签
				3.新建一个文本标签
				4.将文本标签添加到li标签内
				5.获取到ul标签
				6.将新建的li标签添加到ul标签内，<li id="li23">貂蝉</li>之前
				*/
				//1.首先需要获取到li标签
				var li23=document.getElementById("li23");
				//2