HTML代码:
//主要思路:创建一个装li的容器,让留言可以实现所需效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>留言板</title>
</head>
<body>
<ul class="items"></ul>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button οnclick="createLange()">点击留言</button>
</body>
javascript代码:
<script type="text/javascript">
var item = document.getElementsByClassName("items")[0]; //获取ul和下标;
function createLange(){ //创建函数
var val = text.value; //把textarea的内容取出来
var li = document.createElement("li"); //创建li容器装textarea里输入的内容
li.innerHTML = val; //创建li容器装textarea里输入的内容
item.appendChild(li); //插入节点,把li放入合适位置
text.value = "";
var btn = document.createElement("button"); //创建按钮,用来删除li内容
btn.innerHTML = "删除";
li.appendChild(btn); //把按钮插入li后面
btn.onclick = function(){
item.removeChild(li); //remoceChid删除节点,使button按钮生效
}
}
</script>