JavaScript--发布留言

最新推荐文章于 2023-11-01 22:28:13 发布

ban__

最新推荐文章于 2023-11-01 22:28:13 发布

阅读量389

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ban__/article/details/121582604

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现效果

分析思路

实现代码

    <title>发布留言</title>
</head>
<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul></ul>
    <script>
        //1.事件源--输入内容，点击发布，出现li
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea')
        // 2.点击发布之后才触发事件
        btn.onclick = function () {
            // 5.留言不能为空，为空不进行发布
            if (!text.value == '') {
                var content = document.createElement('li');
                // 4.将留言里的内容放到li中,需要获取到留言板里的内容
                content.innerHTML = text.value;
                // 3.创建后的li放在ul的后面
                ul.insertBefore(content, ul.children[0]);
            } else {
                alert('请输入内容后再进行发布');
            }
        }
    </script>
</body>

ban__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript--发布留言

实现效果分析思路实现代码 <title>发布留言</title></head><body> <textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button> <ul></ul> <script> //1.事件源--.
复制链接

扫一扫