论坛发帖与点赞

<div class="div1">
			<div class="div2">
				<input type="button" onclick="show11()"  value="我要发帖"/>
			</div>
			<hr />
			<!-- 发布内容主题 -->
			<div class="body">		
			</div>
			<!-- 发布内容 -->
			<div id="div3">
				<input class="in1" " type="text" value="请输入标题(1-50个字符)" /><br />
					<span>所属板块：</span><select >
							<option >请选择板块</option>
							<option >Python交流板块</option>
							<option >Java交流板块</option>
							<option >Web交流板块</option>
						</select><br />
				<textarea ></textarea><br />
				<input class="in2" type="button" onclick="getValue1()" value="发布"/>
				<input class="in3" type="button" onclick="close1()" value="关闭" />
			</div>
		</div>

<script type="text/javascript">
		let body1=document.querySelector(".body");
		let body=document.querySelector("#div3");
		//点我要发帖时显示
		function show11(){
			body.style.display="block";
		}
		//点关闭时隐藏
		function close1(){
			body.style.display="none";
		}
		function getValue1(){
			//获取值
			let title=document.querySelector(".in1").value;
			let select=document.querySelector("select").value;
			let textarea=document.querySelector("textarea").value;
			//创建元素
			let ul=document.createElement("ul");
			let li=document.createElement("li");
			let div3=document.createElement("div");
			let title1=document.createElement("h4");
			let select1=document.createElement("span");
			let button1=document.createElement("input");
			let button2=document.createElement("input");
			button1.setAttribute("type","button");
			button1.setAttribute("value","删除");
			button2.setAttribute("type","button");
			button2.setAttribute("value","点赞（0）");
			button2.setAttribute("class","buttonP");
			//绑定点击事件
			//删除
			button1.addEventListener("click",function(e){
                //父元素删除子元素
				e.target.parentNode.parentNode.removeChild(e.target.parentNode);
			});
			button2.className="buttonP";
			let count=0;
			//点赞
			button2.addEventListener("click",function(){
				count++;
				//创建元素即是对象本身，不需要额外的悬选择器进行获取对象
				button2.value="点赞（"+count+")";
			})
			//设置样式
			select1.style.display="inner-block";
			select1.style.width="100px"
			button1.className="but11";
			div3.className="div33";
			li.className="li";
			//写入
			title1.innerHTML=title;
			select1.innerHTML="模块："+select+"内容："+textarea;
			//加入
			li.appendChild(title1);
			div3.appendChild(select1);
			li.appendChild(div3);
			li.appendChild(button2);
			li.appendChild(button1);
			ul.appendChild(li);
			body1.appendChild(ul);
			//关闭
			close1();
		}
		

	<style>
		ul{
			list-style: none;
		}
		.div1{
			margin-top: 100px;
			text-align: center;
			
		}
		.div2 input{
			background-color: green;
			color: white;
			font-weight: 700;
			height: 40px;
			width: 180px;
			line-height: 40px;
			font-size: 16px;
			text-align: center;
			border-radius: 15px;
			text-align: center;
		}
		hr{
			color: gray;
			opacity: 0.6;
			width: 500px;
			text-align: center;
		}
		#div3{
			position: fixed;
			margin-top: 0px;
			z-index: 999;
			border: 1px solid darkgray;
			width: 500px;
			margin-left: 32.5%;
			
			display: none;
			z-index: 999;
		}
		#div3 .in1{
			margin-top: 10px;
			border: 1px solid darkgray;
			height: 30px;
			width: 450px;
			opacity: 0.6;
			line-height: 30px;
			font-size: 14px;
		}
		#div3 span{
			display: inline-block;
			opacity: 0.8;
			margin-top: 8px;
			font-size: 17px;
			height: 30px;
			color: black;
			font-weight: 500;
			line-height: 30px;
/* 			border: 1px solid darkgray; */
			margin-left: -170px;
		}
		#div3 select{
			opacity: 0.7;
			width: 190px;
			height: 25px;
			color: black;
			font-weight: 400;
			line-height: 25px;
			/* border: 1px solid darkgray; */
			font-size: 15px;
		}
		#div3 textarea{
			text-indent: 2em;
			opacity: 0.8;
			margin-top: 5px;
			margin-left: 23px;
			font-size: 16px;
			display: block;
			height: 200px;
			width: 450px;
			overflow: auto;
		}
		.in2,.in3{
			height: 25px;
			line-height: 25px;
			width: 100px;
			border-radius: 10px;
			color: white;
			font-weight: 700;
			background-color: green;
			margin-bottom: 10px;
		}
		.body{
			box-sizing: border-box;
			border: 1px solid gray;
			width: 500px;
			margin: 0 auto;
		}
		.btn11{
			background-color: green;
			line-height: 30px;
			height: 30px;
			font-size: 16px;
			margin-top: 0 auto;
		}
		.div33{
			width: 480px;
			margin-bottom: 10px;
			overflow: hidden;
			margin-left: -7%;
			border: 1px solid darkgray;
		}
		
	</style>