动态添加节点

最新推荐文章于 2024-02-05 21:34:36 发布

x_l_x

最新推荐文章于 2024-02-05 21:34:36 发布

阅读量561

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_42740745/article/details/84502014

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了一个使用JavaScript在网页上动态添加列表项的方法。通过获取指定ID的ul元素和创建新的li元素，然后将文本节点附加到li元素，并将li元素附加到ul元素，实现了在按钮点击事件中添加城市名称到列表的功能。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload = function(){
		var ul1 = document.getElementById("ul1");
		document.getElementById("add").onclick = function(){
			var textnode = document.createTextNode("深圳");
			var addli = document.createElement("li");
			addli.appendChild(textnode);
			ul1.appendChild(addli);
		}
	};
</script>
</head>
<body>
	<input type="button" value="添加" id="add"/>
	<ul id="ul1">
		<li>北京</li>
		<li>上海</li>
		<li>广州</li>
	</ul>
</body>
</html>