关闭

javascript如何创建子节点

标签: createElement
1063人阅读 评论(0) 收藏 举报
分类:

学习完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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:30398次
    • 积分:652
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:5篇
    • 译文:0篇
    • 评论:0条