Js留言板

在html中

    <div id="msg">

        <textarea id="text"></textarea>

        <input type="button" id="btn" value="提交">

        <ul class="list"></ul>

    </div>

</body>

在js中写入代码如下

<script>

    // 通过document获取

    var btn = document.getElementById('btn');

    var list = document.querySelector('.list');

    var text = document.getElementById('text');

    btn.onclick = function(){
        // 如果text为空则提示

        if(text.value == ''){
            alert('请输入内容')

        }else{
            var li = document.createElement('li');

            // innerHTML像对象插入内容

            li.innerHTML = text.value+'<span>'+'<button>删除</button></span>';

            text.value='';

            list.insertBefore(li,list.children[0]);

            //获取上面插入的button

            var allB = document.querySelectorAll('button');

            for(var i=0;i<allB.length;i++){
                allB[i].οnclick=function(){
                    list.removeChild(this.parentNode.parentNode);

                }

            }

        }

    }

</script>