操作DOM树之修改某一个标签

最新推荐文章于 2021-07-21 23:00:57 发布

原创最新推荐文章于 2021-07-21 23:00:57 发布 · 444 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML

14 篇文章

订阅专栏

本文介绍了如何在DOM中操作，特别是针对ul下的li标签进行修改，通过五个步骤详细阐述了如何用新的li标签替换原有的li标签，包括获取ul元素、创建新li和文本节点、将文本节点插入li等过程。

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

问题描述：

在ul标签下的li标签做出修改，使用新的li标签替换原来的li标签

问题分析：

第一步：获取需要被修改的ul标签

第二步：新建一个li标签

第三步：新建一个文本节点

第四步：将文本节点添加到li标签内部

第五步：获取需要被修改的li标签

第六步：ul标签调用replaceChild();方法，实现替换


<html>
   <head>
    <title>html示例</title>
   </head>
   <body>
		<ul id="ul31">
		<li id="li41">紫衫龙王</li>
		<li id="li42">白眉鹰王</li>
		<li id="li43">金毛狮王</li>
		<li id="li44">青翼蝠王</li>
		</ul>
		<input type="button" value="replace" onclick="replace1();"/>
		<script type="text/javascript">
			function replace1(){
					//获取要被替换的节点
					var li44=document.getElementById("li44");
					//新建一个li标签
					var li45=document.createElement("li");
					//新建一个文本节点
					var text45=document.createTextNode("张无忌");
					//将文本节点添加到li标签内
					li45.appendChild(text45);
					//获取ul标签
					var ul31=document.getElementById("ul31");
					//将新建的节点替换原来ul标签内的节点
					ul31.replaceChild(li45,li44);

				}
		</script>
   </body>
</html>