<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. 搭建splinter+python环境时遇到的错误

    因为不想用urllib2了,没有用过splinter,今天就想试试,毕竟后者支持的功能更人性化/自动化. 1,安装splinter 安装过程很简单,安装了pip的话,执行: $ [sudo] pip ...

  2. 【问题】pod setup 问题

    安装pod setup 的时候,可能会安装失败,可以多试几次,但是如果一直失败,那就是由问题了. 解决办法: 1. 分别执行下面命令卸载cocoapods和xcodeproj,如果你的机器上面有多个版 ...

  3. java交通灯管理系统项目

    交通灯管理系统   模拟实现十字路口的交通灯管理系统逻辑,具体需求如下: 异步随机生成按照各个路线行驶的车辆. 例如: 由南向而来去往北向的车辆 ---- 直行车辆 由西向而来去往南向的车辆 ---- ...

  4. win8 开启administrator 管理员帐户

    进入命令提示符以后,输入命令:[net user administrator /active:yes]然后注销,就可以使用administrator登录.. 如果想要取消administrator激活 ...

  5. js 中比较 undefined

    // x has not been declared before if (typeof x === 'undefined') { // evaluates to true without error ...

  6. python web.py安装使用

    官方首页:http://webpy.org/) 它的源代码非常整洁精干,学习它一方面可以让我们快速了解python语法(遇到看不懂的语法就去google),另一方面可以学习到python高级特性的使用 ...

  7. Alias Method解决随机类型概率问题

    举个例子,游戏中玩家推倒了一个boss,会按如下概率掉落物品:10%掉武器 20%掉饰品 30%掉戒指 40%掉披风.现在要给出下一个掉落的物品类型,或者说一个掉落的随机序列,要求符合上述概率. 一般 ...

  8. VS013的单元测试去哪里了

    需要安装这个插件 http://visualstudiogallery.msdn.microsoft.com/45208924-e7b0-45df-8cff-165b505a38d7

  9. 使用JMeter做压力测试

    使用JMeter做压力测试 1．下载Jmeter 地址:http://jmeter.apache.org/download_jmeter.cgi 2．启动jmeter 运行bin/jmeter.bat ...

  10. Java基础知识强化33：String类之String类的获取功能

    1. String类的获取功能 int length() // 获取字符串中字符的个数(长度) char charAt(int index)//根据位置获取字符 int indexOf(int ch) ...