JavaScript实现动态留言板
作者：微光时间：2026-10-23 16:34:30浏览：201
本文介绍如何使用原生JavaScript、HTML和CSS创建一个简单的动态留言板。通过获取DOM元素、监听按钮点击事件，实现将文本域内容动态添加至列表，并支持删除已发布留言的功能。
动态留言板实现概述
本文分享了一个简易动态留言板的实现案例，供读者参考学习。
具体效果如下所示：
实现思路与结构
实现思路如下：
HTML结构代码如下：
HTML页面结构
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发表留言</button>
<ul></ul>CSS样式代码如下：
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>JavaScript交互逻辑代码如下：
JavaScript交互逻辑
<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>以上内容为本文的全部介绍，希望能为读者的学习提供一定帮助，同时也欢迎继续支持本站。
作者最新文章
JavaScript零基础入门：从环境搭建到运行第一段代码
2026-11-05 15:29:58
HTML链接中javascript：void(0)的作用及现代替代方案
2026-11-05 10:07:47
在线调试 JS 时怎么引入 jQuery 或 Vue 等第三方库
2026-11-05 08:53:56
原生JavaScript实现简易颜色选择器原理与代码
2026-11-03 23:22:19
JS原生表单序列化：FormData与URLSearchParams用法详解
2026-11-03 23:13:21