案例:简单版发布留言功能

<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');
    // 2. 注册事件
    btn.onclick = function() {
        if (text.value == '') {
            alert('您没有输入内容');
            return false;
        } else {
            //(1)创建元素
            var li = document.createElement('li');
            // 先有li才能赋值
            // 阻止链接跳转需要添加javascript:void(0);或者javascript:;
            li.innerHTML = text.value + "<a href='javascript:;'></a>"
            //(2)添加元素
            // ul.appendChild(li);
            ul.insertBefore(li, ul.children[0]);
            //(3)删除元素,删除的是当前a链接所在的li
            var as document.querySelectorAll('a');
            for (var i = 0; i < as.length; i++) {
                as[i].onclick = function() {
                    // 删除的是当前a所在的li,也就是a的父元素
                    ul.removeChild(this.parentNode);
        }
    }
</script>

 

posted @ 2020-05-21 22:33  浮华夕颜  Views(245)  Comments(0Edit  收藏  举报