js实现留言板的发布与删除

最新推荐文章于 2023-01-29 13:06:23 发布

秃头码农007

最新推荐文章于 2023-01-29 13:06:23 发布

阅读量292

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_52256892/article/details/120650068

版权

js实现留言板的发布与删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				background-color: coral;
			}

			li a {
				float: right;
			}
		</style>

	</head>
	<body>
		<textarea rows="" cols="">123</textarea>
		<button type="button">发布</button>
		<ul>

		</ul>
		<script type="text/javascript">
			var text = document.querySelector('textarea');
			var btn = document.querySelector('button');
			var ul = document.querySelector('ul');
			btn.onclick = function() {
				if (text.value == '') {
					alert('你没有输入值');
					return false;
				} else {
					//创建元素
					var li = document.createElement('li');
					li.innerHTML = text.value + "<a href ='javascript:;'>删除</a>";
					//添加元素
					// ul.appendChild(li);
					ul.insertBefore(li, ul.children[0])
					//删除元素
					var as = document.querySelectorAll('a');
					for (var i = 0; i < as.length; i++) {
						as[i].onclick = function() {
							ul.removeChild(this.parentNode);
						}
					}
				}
			}
		</script>
	</body>
</html>

秃头码农007

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
js实现留言板的发布与删除

js实现留言板的发布与删除<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li { background-color: coral; } li a { float: right; } </style> </
复制链接

扫一扫