JavaScript实现动态留言板
(编辑：jimmy 日期: 2024/11/16 浏览：2)
本文实例为大家分享了简单动态留言板的创建，供大家参考，具体内容如下
效果图展示：
思路
html代码
<textarea name="" id="" cols="30" rows="10"></textarea> <button>发表留言</button> <ul></ul>
css代码
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid #000;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
width: 40px;
height: 20px;
text-align: center;
text-decoration: none;
background-color: #fff;
border: 1px solid #ccc;
color: #000;
}
</style>
js代码
<script>
//点击按钮之后 就动态创建一个li 添加到ul里面
//创建li的同时 把文本域里面的值通过li.innerHTML赋值给li
//获取元素
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
//创建事件
btn.onclick = function () {
if (text.value == '') {
return false;
} else {
//1.创建li
var li = document.createElement('li');
//先有li 再赋值
li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" >删除</a>';
//2.添加li
ul.appendChild(li); //在后面追加
// ul.insertBefore(li,ul.children[0]); 动态在前面追加
//3.删除元素 删除当前链接的li 他的父亲
var as = document.querySelectorAll('a');
for(var i = 0;i<as.length;i++){
as[i].onclick = function(){
// 删除当前a的父亲li li的父亲是ul
//删除节点语法 父节点.removeChild(子节点)
ul.removeChild(this.parentNode);
}
}
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。