JS基础-简单留言板案例

需要达到的效果：

思路：在上面的textarea中输入内容之后，点击按钮之后通过textarea.value获取到内容然后删掉里面的内容，再创建一个li元素，把获取到的内容给li，然后通过insertBefore追加到ul中。

完整代码：

<!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>简单版发布留言案例</title>
    <style>
        textarea {
            border: 1px solid pink;
            /* 禁止用户拖动 */
            resize: none;
            /* 按下边框消除 */
            outline: none;
        }
        
        ul li {
            background-color: pink;
            width: 300px;
            padding: 5px;
            color: violet;
        }
    </style>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <button>发布</button>
    <ul>
        <li>123</li>
    </ul>
    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        console.log(ul.children[0].text);
        var content = '';
        btn.onclick = function() {
            // 获取textarea中的文字
            content = text.value;
            text.value = '';
            // 创建一个新的li元素
            var li = document.createElement('li');
            li.innerHTML = content;
            // 在ul的第一个li之前追加元素
            ul.insertBefore(li, ul.children[0]);
        }
    </script>
</body>

</html>

JS基础-简单留言板案例

猜你喜欢