admin
管理员
管理员
  • UID1
  • 粉丝2
  • 关注2
  • 发帖数339
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:4167回复:0

js实现网页收藏功能,动态添加删除网址

楼主#
更多 发布于:2013-09-09 11:07
分享到:
<html>
 <head>
  <title> php点点通 - 关注php开发,提供专业web开发教程 </title>
  <meta charset="utf-8">
  <script>
        function add(){
            var name = document.getElementById("name").value;
            var url = document.getElementById("url").value; 
            var list = document.getElementById("list");
            //动态创建节点
            var link = document.createElement("a");
            link.setAttribute("href",url);  //设置属性
            link.innerHTML = name;  
            //增加删除的按钮
            var button = document.createElement("input");
            button.setAttribute("type","button");
            button.value = "删除";
            /**
                (1).event对象表示对象的状态,提供了对象的相关细节,IE浏览器被
                存储在 Window 对象的 event 属性中。
                (2).srcElement属性是对于生成事件的 Window 对象、Document 对象或 Element 对象的引用 
                (3).parentNode 属性返回指定节点的父节点。
                (4).removeChild() 方法删除子节点。
  
            **/
            button.onclick = function(event){
                var target;
                if (event == null)
                {
                    target = window.event.srcElement;
                }else{
                    target = event.target;
                }
                var div = target.parentNode;
                div.parentNode.removeChild(div);
                alert("删除成功");
            }
            //添加生成的内容
            var div = document.createElement("div");
            div.appendChild(button);
            div.insertBefore(link,button);
            list.appendChild(div);
  
            }
  </script>
 </head>
 <body>
 <hr>
  站点名称:<input type="text" name="name" id="name">
  网址:<input type="text" name="url" id="url">
  <input type="button" value="增加" onclick="add()">
  <div id="list">
  </div>
 </body>
</html>
游客

返回顶部