Css部分:
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
}
input {
float: right;
}
HTML部分:
Script部分:
$(function () {
$("#btn").click(function () {
var a = document.getElementById("txt").value;//获取输入框里面的文字
$("<li>" + a + "</li>").prependTo($("#ul"));//把输入框里的文字获取到ul里面的li里面
$("#txt").val("");//将输入框里面的内容清空
})
})
效果图: