JavaScript案例：简单留言发布

岳泽以

发布于 2022-10-26 17:20:54

7110

发布于 2022-10-26 17:20:54

文章被收录于专栏：岳泽以博客

案例分析

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

代码实现

<!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>
    <style>
        li {
            list-style: none;
            margin-bottom: 5px;
            background-color: #ddffff !important;
            padding: 14px;
            border-left: 6px solid #ccc !important;
            border-color: #2196F3 !important;
        }

        textarea {
            border: 0;
            border-radius: 5px;
            background-color: rgba(241, 241, 241, .98);
            width: 355px;
            height: 100px;
            padding: 10px;
            resize: none;
        }

        button {
            width: 300px;
            background-color: #4CAF50;
            /* Green */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
            -webkit-transition-duration: 0.4s;
            /* Safari */
            transition-duration: 0.4s;
            border-radius: 10px;
        }
    </style>
</head>

<body style="text-align: center">
    <textarea name="" id="" cols="50" rows="10" placeholder="在这里写下你的留言吧"></textarea>
    <div> <button>立即发布</button></div>

    <ul style="text-align: left">

    </ul>

    <script>
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            if (text.value == '') {
                alert('您没有输入内容')
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                //ul.appendChild(li);  后面插入
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>


</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022 年 05 月，如有侵权请联系 cloudcommunity@tencent.com 删除

append