前端动态发布：实时评论与列表操作-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62219063/article/details/123621187

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box{
				width: 600px;
				margin: 50px auto;
			}
			.text{
				width: 500px;
				height: 400px;
				border: 2px solid aqua;
			}
			.text>textarea{
				width: 400px;
				height: 300px;
				resize: none;
				margin: 30px 0 0 50px;
			}
			.text>button{
				background-color: #E83632;
				position: relative;
				bottom: -40px;
				left: -40px;
				width: 40px;
				height: 30px;
			}
			.lis{
				width: 500px;
				height: 300px;
				margin-top: 20px;
				/* border: solid 2px blue; */
			}
			.lis>ul>li{
				width: 500px;
				height: 20px;
				margin-top: 10px;
				list-style: none;
				border: solid 2px blue;
			}
			li>a{
				float: right;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="text">
				<textarea rows="" cols=""></textarea>
				<button>发布</button>
			</div>
			<div class="lis">
				<ul>
					<!-- <li>删除</li>
					<li></li> -->
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		// 1、获取元素button,Textarea,ul
		var text = document.querySelector('textarea');
		var ul = document.querySelector('ul');
		var btn = document.querySelector('button');
		// 2、注册事件
		btn.onclick = function(){
		// 3、处理程序
			// 创建li节点
			var li = document.createElement('li');
			// 把内容赋值给li
			li.innerHTML = text.value+"<a href='javascript:'>删除</a>";
			// console.log(ul);
			ul.appendChild(li);
			// 事件完成让text的内容清空
			text.value = '';
			// 删除元素
			var li =document.querySelectorAll('a');
			for(var i=0;i<li.length;i++){
				li[i].onclick = function(){
					ul.removeChild(this.parentNode);
				}
			}
		}
	</script>
</html>

发布框案例