留言板(简单版) (Web API 节点操作)

最新推荐文章于 2024-06-15 17:55:19 发布

没人回复我哼

最新推荐文章于 2024-06-15 17:55:19 发布

阅读量835

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105606435

版权

本文介绍了如何使用JavaScript实现一个简单的留言板功能。点击发布按钮，动态创建li元素并将文本域内容添加到ul中。通过appendChild或insertBefore决定新留言的位置。同时，为每个留言添加删除链接，点击链接时删除对应的li元素，阻止链接默认跳转行为。

摘要由CSDN通过智能技术生成

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求

点击发布按钮，添加留言

思路

点击按钮之后就动态创建一个 li，添加到 ul 里面
创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li
如果想要新的留言后面显示就用 appendChild，如果想要前面显示就用 insertBefore

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
   
            /* 清除内边距、外边距 */
            margin: 0;
            padding: 0;
            /* 盒子大小为 width，padding和border不会撑大盒子 */
            box-sizing: border-box;
        }

        body {
   
            /* css3抗锯齿形，让文字显示的更加清晰 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font-size: 16px;
        }

        .box {
   
            margin: 100px 200px;
        }

        li {
   
            width: 725px;
            padding: 5px;
            color: red;
            background-color: aliceblue;
            margin: 15px 0;
        }

        ul {
   
            margin-top: 30px;
            margin-left: 25px;
        }

        textarea {
   
            padding: 5px;
            border-color: red;
            overflow: auto;
            resize: none;
            outline: none;
        }

        button {
   
            width: