脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js DOM简单留言板

JavaScript DOM实现简单留言板

 更新时间：2022年01月07日 09:00:02   作者：我莫得感情_  
这篇文章主要为大家详细介绍了JavaScript DOM实现简单留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

您可能感兴趣的文章:

相关文章

最新评论