标签：text 留言板 li ul var js document 节点

本文所用的知识点：创建节点和添加节点

创建节点：document.createElement('li')

添加节点  node(父亲节点).appendChild(child)    child:子节点   追加式添加元素   insertBefore：使得插入的元素始终显示在最前面   参考文档：https://www.runoob.com/js/js-htmldom-elements.html  

（效果图）

<!-- css -->
* {margin:0;padding:0;}
ul,li {list-style:none;}
.wrap {width:400px;margin:100px auto;}
li {padding:5px;border-bottom:1px solid #eeeeee;margin:5px 0;font-size:14px;line-height:28px;}
button {background:#169fe6;border:none;color:#ffffff;padding:5px 15px;cursor:pointer;}
button:hover {background:#45bcf9;}
textarea {width:100%;padding:10px;box-sizing:border-box;}

<!-- html -->

<div class="wrap">
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div>
<button>评论</button></div>
<ul></ul>
</div>

        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');

        // 注册事件
        btn.onclick = function () {
            // 判断用户是否输入值
            if (text.value == '') {
                alert('请输入评论内容！');
                return false;
            } else {
                // 1、创建节点
                var li = document.createElement('li');
                // 2、将用户输入的值赋添加到li元素中去，使用 innerHTML
                li.innerHTML = text.value;
                // 3、添加节点
                ul.insertBefore(li, ul.children[0]);
                text.value = ''
            }
        }

标签：text,留言板,li,ul,var,js,document,节点
来源： https://www.cnblogs.com/sxdpanda/p/13132311.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。