zoukankan      html  css  js  c++  java
  • 留言 节点操作案例

     
     
     
     
    <!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 {
                 200px;
                height: 100px;
                border: 1px solid pink;
                outline: none;
                resize: none;
            }
            
            ul {
                margin-top: 50px;
            }
            
            li {
                 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>
            //  1 获取元素
            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.appendChild(li);
                    ul.insertBefore(li, ul.children[0]);
                    text.value = '';
                }

            }
        </script>
    </body>

    </html>
  • 相关阅读:
    免费的视频、音频转文本
    Errors are values
    Codebase Refactoring (with help from Go)
    Golang中的坑二
    Cleaner, more elegant, and wrong(msdn blog)
    Cleaner, more elegant, and wrong(翻译)
    Cleaner, more elegant, and harder to recognize(翻译)
    vue控制父子组件渲染顺序
    computed 和 watch 组合使用,监听数据全局数据状态
    webstorm破解方法
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13052634.html
Copyright © 2011-2022 走看看