博客列表 >留言板案例2019年1月21日

留言板案例2019年1月21日

A云海的博客
A云海的博客原创
2019年01月21日 21:10:56630浏览

总结:

1、querySelector,getElementsByTagName来获取元素;

2、当onkeydown 时触发function(event)事件;

3、keyCode=13为回车值是,createElement 创建一个元素为li元素,并innerHTML输入当前输入文本内容(comment.value);

4、 ul.childElementCount===0 如果统计ul下面li为0时,ul.appendChild(li);在ul下面添加一个li元素,否则,ul.insertBefore(li,ul.firstElementChild);数据插入到ul下面第一个li元素

5、删除数据在写入数据添加javascript:; 当点击删除时,触发事件onclick

6、var li=ele.parentNode; ele代表当前<a>,parentNode是获取父节点,当前的父节点就<li></li>;

7、li.parentNode.removeChild(li); 删除父节点;


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <h3>留言板</h3>
    <input type="text">
    <ul></ul>


    <script>
    var comment=document.querySelector('input');
    var ul = document.getElementsByTagName('ul')[0]
       comment.focus;
       comment.onkeydown=function(event){
            if(event.keyCode===13){
            var li=document.createElement("li");
             li.innerHTML = comment.value+"<a href='javascript:;' onclick='del(this)'>删除</a>";
             if(ul.childElementCount===0){
                ul.appendChild(li);
             }else{
               ul.insertBefore(li,ul.firstElementChild);
             }
             comment.value="";
            }        
    }
    function del(ele){
           if(confirm('是否删除?')){
             var li=ele.parentNode;
              li.parentNode.removeChild(li);
       }
       return false;
    }
    </script>
    
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议