操作DOM树之在子标签末尾添加标签

最新推荐文章于 2022-09-07 10:13:43 发布

ll123c

最新推荐文章于 2022-09-07 10:13:43 发布

阅读量755

点赞数

分类专栏： javascript HTML

本文链接：https://blog.csdn.net/ll123c/article/details/88954968

版权

了解DOM解析HTML的过程，将其比作一棵树。根节点为最外层标签，叶子节点是内层标签。案例解析：如何在指定的<ul>元素末尾动态添加一个新的<li>标签，包括获取元素、创建新标签、插入文本和添加子节点的步骤。

摘要由CSDN通过智能技术生成

在完成这个案例之前要清楚DOM解析html文件的过程。解析的过程类似于一个树。称之为DOM树

首先树的根节点是文件的最外层的标签，然后根节点的子节点是最外层标签的第一个内标签....依此类推。

也就是DOM树的叶子结点一定是HTML文件的最内层标签。

题目：

在<ul>标签末尾添加一个新的li标签。

分析：

第一步，无论进行什么操作，需要先获取原来的ul标签。var ul1=document.getElementById("ul1");

第二步，新建一个li标签 var li1=document.createElement("li");

第三步，创建标签内的文本 var text1=document.createTextNode("555");

第四步，将文本添加到新建的li标签内 li1.appendChild(text1);

第五步，将新建的li标签添加到原来的ul标签内 ul1.appendChild(li1);

<html>
   <head>
    <title>html示例</title>
   </head>
   <body>
   		<ul id="ul1" >
			<li>111</li>
			<li>222</li>
			<li>333</li>
			<li>444</li>
		</ul>
		<br/>


		<input type="button" value=&

最低0.47元/天解锁文章

ll123c

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
操作DOM树之在子标签末尾添加标签

在完成这个案例之前要清楚DOM解析html文件的过程。解析的过程类似于一个树。称之为DOM树首先树的根节点是文件的最外层的标签，然后根节点的子节点是最外层标签的第一个内标签....依此类推。也就是DOM树的叶子结点一定是HTML文件的最内层标签。题目：在<ul>标签末尾添加一个新的li标签。分析：第一步，无论进行什么操作，需要先获取原来的ul标签。var ...
复制链接

扫一扫

专栏目录