首先，通过视频看一下，我们要达到什么一个效果，视频如下：

视频加载中…

分析

1.当我们点击完发布按钮后，会产生一个新的 li 标签

2.我们在textarea里面输入的内容，会放在产生的新的 li 的标签中

3.当我们的textarea里面没有输入任何内容的时候，会提示没事输入内容，请重新输入。

4.我们在textarea里面输入的文字怎样传递给新产生的 li 标签中呢。我们可以通过 li.innerHTML=text.value传递到 li 标签中

代码<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>
</head>

<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('输入内容不能为空，请输入内容');
            } else {
                // 打好字，比点击完按钮后，创建一个新的li
                var li = document.createElement('li');
                // 将输入框的字传给li
                li.innerHTML = text.value;
                // 添加元素
                ul.insertBefore(li, ul.children[0]);
            }
        }
    </script>
</body>

</html>

欢迎大家来到IT世界,在知识的湖畔探索吧!

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/18511.html