【前端 HTML+CSS+JavaScript(JS)】DOM练习-append remove实现排队买鸡蛋带注释/总结

_小鹰

已于 2022-02-17 20:21:39 修改

阅读量349

点赞数

分类专栏：前端文章标签：前端 javascript css html

于 2022-02-17 20:12:42 首次发布

本文链接：https://blog.youkuaiyun.com/cc2855816075/article/details/122990921

版权

前端专栏收录该内容

38 篇文章

订阅专栏

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2-排队</title>
		<style type="text/css">
			#b-box{
				margin: 50px auto;
				width: 500px;
				text-align: center;
			}
			#folk{
				margin-top: 38px;
				text-align: right;
			}
			#folk span{
				border: 1px solid #000;
				float: right;
				margin-left: 17px;
			}
			#clrDiv{
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="b-box">
			<div>
				<h2>排队领鸡蛋</h2>
				<hr/>
			</div>
			
			<div id="folk">
				<span>宸霸</span>
				<span>榕哥哥</span>
				<span>森弟</span>
			</div>
			
			<div id="clrDiv">
				<br/><hr/>
			</div>
			
			<div>
				<br/>
				输入名字：
				<input type="text" name="" id="name" value="" />
				<input type="button" name="" id="queue" value="排队" onclick="queue1()"/>
				<input type="button" name="" id="dequeue" value="出队" onclick="dequeue()"/>
			</div>
			
		</div>
		
		<script type="text/javascript">
			function queue1(){
				// 获取输入框dom对象
				    // 获取队伍的div的dom对象
				    // 取出输入的名字  .value.
				    // 创建一个span对象 document.createElement("span");
				    // 设置span的边框为  1px solid
				    // 将span加入到  队伍的div中
				var name = document.getElementById("name").value;
				var newSpan = document.createElement("span");
				var folkDom = document.getElementById("folk");
				
				newSpan.style.border = "1px solid #000";
				newSpan.style.float = "right";
				newSpan.style.marginLeft = "17px";
				
				newSpan.append(name);
				folkDom.appendChild(newSpan);
			}
			
			function dequeue(){
				// 使用选择器选择所有的span   document.querySelectorAll("div span");
				    // 遍历span数组，
				    // 删除第一个（当然看你的情况，也有可能是最后一个。）
				var delDoms = document.querySelectorAll("#folk span");
				delDoms[0].remove();
			}
		</script>
	</body>
</html>