JavaScriptDOM实现简单留言板

2024-04-02 19:04:59 442人浏览八月长安

摘要

本文实例为大家分享了javascript DOM实现简单留言板的具体代码，供大家参考，具体内容如下效果图：先准备html代码： <body> <tex

本文实例为大家分享了javascript DOM实现简单留言板的具体代码，供大家参考，具体内容如下

效果图：

先准备html代码：

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </ul>
</body>

CSS代码如下：

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            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;
        }
</style>

接下来是最重要的部分，我们先使用document.querySelector()获取我们要操作的对象：button，textarea和ul；

再给button注册点击事件，中间加入判断是否有输入内容，如有输入内容，则继续操作，使用document.createElement(‘li’)创建li标签，再使用li.innerHTML获取textarea控件用户输入的值，最后使用ul.insertBefore（li,ul.children[0]）插入创建好的li标签。

注意：因为留言板显示最新的留言，所以插入在li的最前面。

完整代码如下：

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </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.insertBefore(li, ul.children[0]);
            }
            text.value = '';
        }
    </script>
 
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: JavaScriptDOM实现简单留言板

本文链接: https://lsjlt.com/news/161803.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341