首页 > 其他分享> > JS 简单版留言

JS 简单版留言

2021-05-03 20:31:33 作者：互联网

<!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>
</head>

<body>
    <div class="box">
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul></ul>
    </div>
    <script>
        //1.获取元素
        var texts = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //2.注册时间
        btn.onclick = function() {
            if (texts.value == "") {
                alert('内容不能为空');
                return false;
            } else {
                //(1).创建节点
                var lis = document.createElement('li');
                //(2).先有li才可以赋值
                lis.innerHTML = texts.value;
                //(3).清空文本域内容
                texts.value = '';
                //(4).添加节点
                ul.insertBefore(lis, ul.children[0]);

            }
        }
    </script>
</body>

</html>

标签：ul,留言,lis,JS,texts,querySelector,简单,var,document
来源： https://blog.csdn.net/Hanies/article/details/116380263