前端ABC<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qdabc.cn</title>
<script type="text/javascript">
function insert() {
var para = document.createElement("p");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
para.appendChild(txt);
var list = document.getElementById("list");
list.appendChild(para);
}
//定义删除函数
function del() {
var e = document.getElementById("list");
//判断元素节点e是否有子节点
if (e.hasChildNodes) {
e.removeChild(e.lastChild); //删除e元素的最后一个子节点
}
}
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
textarea{
border-style: none;
width: 100%;
height: 300px;
overflow: auto;
resize: none;
margin: 0 auto;
background-color:white;
}
.div1 {
width: 100%;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
height: 300px;
border: 1px solid silver;
margin: 10px 20px;
background-color:lightyellow;
overflow: scroll;
margin-bottom: 10px;
}
.div2{
width: 100%;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
height: 100px;
border: 1px solid silver;
margin: 10px 20px;
overflow: scroll;
margin-bottom: 10px;
}
p{
font-family: "Georgia", "Times New Roman", sans-serif;
font-size:16px;
text-align: center;
height: 25px;
line-height: 25px;
}
button{
float: right;
margin-right: 20px;
width: 70px;
height: 40px;
font-size:18px;
}
</style>
</head>
<body>
<div id="list" class="div1">
<p>Hellow World</p>
</div>
<div class="div2">
<textarea id="txt" name="txt" ></textarea><br/>
</div>
<button onclick="insert()">提交</button>
<button onclick="del()">删除</button>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » JavaScript 输入显示添加删除