新西兰服务器

如何使用JavaScript DOM制作简单留言板


如何使用JavaScript DOM制作简单留言板

发布时间:2022-03-11 17:28:09 来源:高防服务器网 阅读:56 作者:iii 栏目:web开发

这篇文章主要介绍“如何使用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(&lsquo;li&rsquo;)创建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>

关于“如何使用JavaScript DOM制作简单留言板”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注高防服务器网行业资讯频道,小编每天都会为大家更新不同的知识点。

[微信提示:高防服务器能助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

[图文来源于网络,不代表本站立场,如有侵权,请联系高防服务器网删除]
[