点菜

最新推荐文章于 2022-10-22 11:34:23 发布

DaZhangWei1

最新推荐文章于 2022-10-22 11:34:23 发布

阅读量264

点赞数

分类专栏： JS 文章标签： append点菜

本文链接：https://blog.csdn.net/weixin_44017261/article/details/88284211

版权

JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.heard{
				border: 1px solid black;
				overflow: hidden;
			}
			.heard .dc{
				line-height: 100px;
				height: 100px;
				background: black;
				color: white;
				text-align: center;
			}
			.cen {
				width: 50%;
				float: left;
			}
			.cen li{
				list-style-type: none;
				padding: 20px;
				border-right: 1px solid black;
			}
			.cen li:hover{
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<div class="heard">
			<h1 class="dc">翡翠点菜系统</h1>
			<ul class="cen">
				<li>红烧肉</li>
				<li>京酱肉丝</li>
				<li>糖醋茄子</li>
				<li>糖醋里脊</li>
				<li>红烧肘子</li>
			</ul>
			<ul class="cen">
			</ul>
		</div>	
		<script type="text/javascript">
			var li = document.getElementsByTagName('li');
			var cen = document.getElementsByClassName('cen')[1];
			for (var i = 0;i < li.length;i ++) {
				li[i].onclick=function(){
					var list = document.createElement('li')
					list.innerHTML = this.innerHTML
					cen.appendChild(list)
				}
			}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DaZhangWei1

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点菜

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin: 0;
复制链接

扫一扫