button提交表单并在下面显示 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>提交内容</title>
<style>
body,ul{
margin:0;/*清除默认标签*/
}
ul{
padding-left:0;
list-style:none;
}
input{
display:block;
width:500px;
height:200px;
margin:100px auto 0;
}
.btn{
width:500px;
margin:10px auto;
text-align:right;
}
.msg{
margin:0 auto;
width:500px;
}
.msglist{
line-height:50px;
border-bottom:1px dashed #ccc;
text-indent: 2em;/*开头空两个字符*/
}
</style>
</head>
<body>
<div class="btn">
<input id="qq" type="text" size="30" >
<button>提交</button>
</div>
<ul class="msg"></ul>
<script>
let btn=document.querySelector("button"),//获得button元素
//textArea=document.querySelector("qq"),
msg=document.querySelector(".msg");
btn.onclick=function(){
if(qq.value){
msg.innerHTML+="<li class='msglist'>"+qq.value;//将标签信息添加到ul中
qq.value="";//清空输入框
}else{
alert("你尚未输入信息,请重 新输入")
}
}

</script>
</body>
</html>

 

posted @ 2022-05-12 15:08  iwitcher  阅读(109)  评论(0)    收藏  举报