<!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>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 25岁的心里话
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现