javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js DOM简单留言板

JavaScript DOM实现简单留言板

作者:我莫得感情_

这篇文章主要为大家详细介绍了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>

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

您可能感兴趣的文章:
阅读全文