发布评论案例 复制节点 删除节点 小案例

<textarea name="" id="" cols="30" rows="10"></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('不能为空');
            return false;
        } else {
            // console.log(text.vaule);
            // 创建元素
            var li = document.createElement('li');
            li.innerHTML = text.value + "<a herf='javascript:;'>删除</a>";
            // 添加元素
            // ul.appendChild(li);
            ul.insertBefore(li,ul.children[0]);
            // 删除元素 删除当前的li 
            var as = document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function () {
                    ul.removeChild(this.parentNode);
                }
                
            }
        }
    }
</script>

<!-- 删除节点 小案例-->
<button>删除</button>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    var btn = document.querySelector('button');
    // ul.removeChild(ul.children[0]);
    // 点击按钮依次删除子元素
    btn.onclick = function() {
        if (ul.children.length == 0) {
            this.disabled = true;
        } else {
            ul.removeChild(ul.children[0]);
        }
    }
    
</script>


<!-- 复制节点 -->
<ul>
    <li>152353</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var ul = document.querySelector('ul');
    // 1.node.cloneNode(); 括号为空或里面是false 浅拷贝 只复制标签不复制内容
    // 2.node.cloneNode(true); 括号为true 深拷贝 复制标签并且复制内容
    var lili = ul.children[0].cloneNode(true);
    ul.appendChild(lili);
</script>