<html>

 <head>

  <title> 动态添加删除网址 </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>

js实现网页收藏功能，动态添加删除网址的更多相关文章

  1. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  2. jquery动态添加删除div--事件绑定,对象克隆

    我想做一个可以动态添加删除div的功能.中间遇到一个问题,最后在manong123.com开发文摘 版主的热心帮助下解答了(答案在最后) 使用到的jquery方法和思想就是:事件的绑定和销毁(unbi ...

  3. 编辑 Ext 表格（一）——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  4. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  5. 用Javascript动态添加删除HTML元素实例 (转载)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Angular-表单动态添加删除

    angular本身不允许去操作DOM,在angular的角度来说,所有操作都以数据为核心,剩下的事情由angular来完成.所以说,想清楚问题的根源,解决起来也不是那么困难. 前提 那么,要做的这个添 ...

  7. jQuery动态添加删除select项

    // 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...

  8. C#控制IIS动态添加删除网站

    我的目的是在Winform程序里面,可以直接启动一个HTTP服务端,给下游客户连接使用. 查找相关技术,有两种方法: 1.使用C#动态添加网站应用到IIS中,借用IIS的管理能力来提供HTTP接口.本 ...

  9. vue简单案例_动态添加删除用户数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 转：CFile.Open()的使用说明

    在程中碰到这个一段代码: 讲的是CFILE类的文件操作,故参考MSDN系统学习一下(翻译了一下英文): CFile file;CFileException fe; //打开文件if(!file.Ope ...

  2. ural 1084 Goat in the Garden

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> u ...

  3. 体验Lua

    想用之和NGINX结合,终结公司混乱的NGINX配置 玩起来先,感觉很精简,很实用哟. print("hello world") a={,} b=a print(a==b,a~=b ...

  4. 我学hash_map(1)

    本文来源:http://blog.chinaunix.net/uid-26548237-id-3800125.html  map是什么? map是键值对(key-value),复杂度是O(n).但是查 ...

  5. HDU_1230——火星A+B,加法进制问题

    Problem Description 读入两个不超过25位的火星正整数A和B,计算A+B.需要注意的是:在火星上,整数不是单一进制的,第n位的进制就是第n个素数.例如:地球上的10进制数2,在火星上 ...

  6. HDU_2054——A=B问题

    Problem Description Give you two numbers A and B, if A is equal to B, you should print "YES&quo ...

  7. Palindrome Pairs 解答

    Question Given a list of unique words, find all pairs of distinct indices (i, j) in the given list, ...

  8. 金错刀对话口袋购物王珂：找到痛点，确认卖点，制造爆点！ - 资讯 - i黑马网

    金错刀对话口袋购物王珂:找到痛点,确认卖点,制造爆点! - 资讯 - i黑马网 金错刀对话口袋购物王珂:找到痛点,确认卖点,制造爆点!

  9. ESB 企业服务总线

    整理的OSChina 第 38 期高手问答 —— ESB 企业服务总线,嘉宾为@肖俊_David . @肖俊_David 恒拓开源架构师,热衷于JAVA开发,有多年的企业级开发经验.曾参和设计和开发基 ...

  10. Myeclipse中java文件注释格式设置

    点击菜单windows->preferences,然后在左侧栏选择java ->Code Style -> CodeTemplates然后在右侧栏选择comments -> 依 ...