JavaScript实现简易留言板：动态添加与删除功能
本文介绍如何使用JavaScript、HTML和CSS制作一个简易留言板。核心功能包括：在文本框输入文字后点击提交，动态创建li元素并添加至列表顶部，同时显示当前时间；支持点击删除按钮移除对应留言。文章详细解析了节点创建、事件绑定及DOM增删的具体实现步骤与完整代码。
案例说明
本示例旨在通过JavaScript、CSS以及HTML技术，构建一个功能简单的留言板应用。
具体交互逻辑为：用户在页面的文本输入框中输入文字，点击“提交”按钮后，输入的文字与当前留言时间将显示在下方列表中。若再次输入新文字并提交，新内容将显示在列表的最上方。此外，每条留言后设有删除按钮，点击即可移除已提交的留言。
【案例分析】本功能主要依赖DOM节点的创建、添加和删除操作来实现。在页面交互中，点击“提交”按钮会动态生成一个li元素，并将其插入到ul列表容器中。
HTML结构部分
页面主要包含三个核心部分：一个用于输入的文本框、一个用于触发动作的提交按钮，以及一个用于展示留言内容的ul列表容器。
<div id="mgs">
<textarea id="text"></textarea><br>
<input type="button" id="btn" value="提交">
<ul class="list"></ul>
</div>CSS样式部分
* {
margin: 0;
padding: 0;
}
#mgs {
width: 400px;
color: black;
font-style: italic;
border-width: 5px;
margin: 0 auto;
}
#text {
width: 400px;
height: 150px;
padding: 20px;
font-size: 20px;
}
li {
list-style: none;
border-bottom: 1px solid #999;
line-height: 20px;
margin-top: 30px;
}
span {
float: right;
}CSS部分主要进行默认样式的清除，并设置文本框的样式（字体颜色为黑色，字体风格为斜体，在浏览器视口中水平居中，设定字体大小及内边距）。同时，去除列表的默认样式，其中span标签主要用于包裹显示当前留言的时间信息。
JavaScript代码逻辑
首先，需要获取提交按钮元素、展示留言的ul列表元素以及文本输入框元素。
var btn = document.getElementById('btn');
var list = document.querySelector('.list');
var text = document.getElementById('text');接下来，为按钮绑定点击事件监听器。
在事件处理函数中，首先判断文本框是否为空。如果用户未输入任何内容就点击提交，浏览器将弹出提示框显示“你没有输入内容”。
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容。')
} else {若文本框中有内容，则执行以下操作：创建一个li元素节点，将该li元素的innerHTML设置为文本框内的内容、当前时间以及一个删除按钮的组合字符串。随后，将该li元素添加到ul列表中，并清空文本框内的已输入内容。
var li = document.createElement('li');
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>'
text.value = '';
list.insertBefore(li, list.children[0]);获取当前输入内容的时间戳，格式化为年月日字符串。
var time = new Date();
var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>';最后，为生成的删除按钮绑定点击删除事件。通过querySelectorAll获取页面中所有的button按钮，遍历每个按钮并绑定点击事件。当点击某个button时，通过this.parentNode.parentNode获取其对应的li元素节点，并从列表中移除该节点。
var allB = document.querySelectorAll('button');
for (var i = 0; i < allB.length; i++) {
allB[i].onclick = function () {
list.removeChild(this.parentNode.parentNode);
}全部代码
<!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;
}
#mgs {
width: 400px;
color: black;
font-style: italic;
border-width: 5px;
margin: 0 auto;
}
#text {
width: 400px;
height: 150px;
padding: 20px;
font-size: 20px;
}
li {
list-style: none;
border-bottom: 1px solid #999;
line-height: 20px;
margin-top: 30px;
}
span {
float: right;
}
</style>
<body>
<div id="mgs">
<textarea id="text"></textarea><br>
<input type="button" id="btn" value="提交">
<ul class="list"></ul>
</div>
<script>
var btn = document.getElementById('btn');
var list = document.querySelector('.list');
var text = document.getElementById('text');
btn.onclick = function () {
if (text.value == '') {
alert('你没有输入内容。')
} else {
var li = document.createElement('li');
var time = new Date();
var mytime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
li.innerHTML = text.value + '<span>' + mytime + '\t' + '<button>删除</button></span>';
text.value = '';
list.insertBefore(li, list.children[0]);
var allB = document.querySelectorAll('button');
for (var i = 0; i < allB.length; i++) {
allB[i].onclick = function () {
list.removeChild(this.parentNode.parentNode);
}
}
}
}
</script>
</body>
</html>效果图展示
未输入任何内容时点击提交的界面状态。
输入有效内容并点击提交按钮后的界面状态。
点击留言后的删除按钮时的界面状态。
总结
至此，关于使用JavaScript实现简易留言板的功能介绍完毕。如需了解更多JS实现留言板的相关内容，可搜索本站过往文章或继续浏览后续系列文章，感谢大家的支持！
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33