JavaScript实现简易留言板

来源：飒榕旅游知识分享网

留言板

需要实现的功能

 	Ⅰ，最新留言显示在最上边
 	Ⅱ，有删除功能
 	Ⅲ，点击留言后清空input内容

实现功能
```
 Ⅰ，HTML部分
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="txt"><input type="button" value="请留言" id="btn">
    <ul id="ul"></ul>
</body>
</html>

	Ⅱ，JS部分

		var o_txt = document.getElementById('txt');
        var o_btn = document.getElementById('btn');
        var o_ul = document.getElementById('ul');
        o_btn.onclick = function (){
            var txt = o_txt.value;
            //创建li
            var o_li = document.createElement('li');
            //创建删除
            var a = document.createElement('a');
            //设置啊a的href属性
            a.href = 'javascript:;'
            a.innerText = '删除';
            //把留言放到li里
            o_li.innerText = txt;
            //把a放到留言后边
            o_li.appendChild(a);
            //如果ul里面没有li则追加到ul里面有的话插入到最前面
            if(o_ul.children.length){
                o_ul.insertBefore(o_li,o_ul.firstElementChild);
            }else{
                o_ul.appendChild(o_li);
            }    
            a.onclick = function (){
                //a的父元素为li  移除li
                a.parentNode.remove();
            }
            //清空里面的value
            o_txt.value = '';
        }

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文