JS简易题目练习

阿乐681

于 2022-09-26 13:08:32 发布

阅读量160

点赞数

文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/weixin_65348018/article/details/127051677

版权

有一个数组里面存储了五个学生的姓名，请使用js将这五名学生的姓名以列表的形式显示在页面中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var students = ["小明", "小蓝", "小白", "小可", "小乐"]
			var a = document.getElementsByTagName("li")
			for (var i = 0; i < students.length; i++) {
				a[i].innerHTML = students[i]
			}
			
		</script>
	</body>
</html>

根据指定的内容添加、删除、修改列表中的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="添加" id="add" onclick="add()">
		<input type="button" value="删除" id="del" onclick="del()">
		<input type="button" value="修改" id="rec" onclick="rec()">
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var students = ["小明", "小蓝", "小白", "小可", "小乐"]
			var a = document.getElementsByTagName("li")
			var ul=document.querySelector("ul")
			for (var i = 0; i < students.length; i++) {
				a[i].innerHTML = students[i]
			}
			function add(){
				var li=document.createElement("li")
				li.innerHTML="新添加的节点"
				ul.appendChild(li)
			}
			function del(){
				var li=document.querySelectorAll("li")[0]
				ul.removeChild(li)
			}
			function rec(){
				var li=document.querySelectorAll("li")[0]
				li.innerHTML="更新后的"
			}
		</script>
	</body>
</html>