<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
position: relative;
}
.input{
position: absolute;
left: 50%;
top: 100px;
transform: translateX(-50%);
}
.sub{
float: right;
width: 100px;
height: 40px;
}
.output{
position: absolute;
left: 50%;
top: 150px;
transform: translateX(-50%);
}
ul{
list-style: none;
margin-top: 100px;
}
.input li{
border-bottom: 1px solid black;
text-indent: 10px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
}
</style>
<body>
<div class="container">
<div class="input">
<textarea name="myinput" id="in" cols="80" rows="10"></textarea>
<br>
<button class="sub" id="btn">提交</button>
<ul class="list"></ul>
</div>
</div>
</body>
<script>
const input=document.getElementById("in")
const list = document.getElementsByClassName("list")[0]
const bt=document.getElementById("btn")
bt.addEventListener('click',()=>{
const listitem=document.createElement('li')
listitem.innerHTML=input.value
list.appendChild(listitem)
input.value=''
})
</script>
</html>
