javascript如何创建子节点

最新推荐文章于 2022-01-13 13:00:46 发布

原创最新推荐文章于 2022-01-13 13:00:46 发布 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#createElement

JavaScript学习专栏收录该内容

22 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript来创建子节点，以在HTML的ul列表中添加li子节点为例，详细阐述了创建子节点的六个步骤，包括创建、添加属性、创建文本节点、将文本节点添加到子节点、获取父节点以及将子节点添加到父节点的过程。

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

学习完HTML+css后，我并没有直接去学习HTML5和css3,而是开始学习JavaScript，现在就是jQuery基础也懂一点，js也懂一点，css3也懂得那么点。但是给我的感受就是不精通熟练，于是咬咬牙开始从心开始学起了JavaScript，这才是最基础最有用的吧

今天要讲的就是如何通过原生JavaScript来创建子节点（以ul添加子节点li为例）

如何在城市列表中后添加一个城市名称天津？？这就是我要说的知识！

创建子节点步骤：

一:创建子节点li并取名

二：为子节点添加属性（id,value）

三：创建文本节点

四：将文本节点添加到子节点中

五：获取子节点的父节点，这里指的是ul;

六：将自己点添加到父节点中

这样，添加创建一个节点就完成了！

代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	您喜欢的城市：<br>
	<ul id="city">
		<li id="bj" value="beijing">北京</li>
		<li id="sh" value="shanghai">上海</li>
		<li id="cq" value="chongqing">重庆</li>
	</ul>
	<button id="btn">增加子节点</button>
	<script type="text/javascript">
		// 增加城市节点“天津"
		// 创建元素节点--设置属性--创建文本节点--在li上增加文本几点--获取ul节点--增加li节点
		window.onload=function(){
		document.getElementById('btn').onclick=function(){
		
		var liElement=document.createElement('li');
		liElement.setAttribute('id','tj');
		liElement.setAttribute('value','tianjing');
		var liText=document.createTextNode('天津');
		liElement.appendChild(liText);

		document.getElementById('city').appendChild(liElement);
		}
		}
	</script>
</body>
</html>