<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. iOS 数据库操作(使用FMDB)

    iOS 数据库操作(使用FMDB)   iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.Plausibl ...

  2. Deep Residual Learning for Image Recognition（MSRA-深度残差学习）

    转自:http://blog.csdn.net/solomonlangrui/article/details/52455638   ABSTRACT:           神经网络的训练因其层次加深而 ...

  3. C++统计代码注释行数 & 有效代码行数 & 代码注释公共行 & 函数个数

    问题来源,在14年的暑假的一次小项目当中遇到了一个这样的问题,要求统计C++代码的注释行数,有效代码行数,代码注释公共行数,以及函数个数. 下面稍微解释一下问题, 1)注释行数:指有注释的行,包括有代 ...

  4. 『安全工具』Nessus多功能扫描器

    0x 00 前言 写这篇博客,证明我还活着…… 0x 01 安装Nessus  直接官网  www.tenable.com/products/nessus/select-your-operating- ...

  5. data-theme 几种值的样式

    代码片段: <div data-role="page"> <div data-role="header"> <h1>The ...

  6. 温习PYTHON语法

    看WEBPY的源码结构有点晕,原来很多语法结构都忘了,继承之些. 再看A BYTE OF PYTHON.慢慢补.. number = 23 guess = int(raw_input('Enter a ...

  7. Spring 定时任务之 @Scheduled cron表达式

    一个基于Spring boot的一个demo: Java配置中开户对Scheduled的支持 import org.springframework.context.annotation.Configu ...

  8. City Tour

    Description Alice想要从城市A出发到城市B,由于Alice最近比较穷(不像集训队陈兴老师是个rich second),所以只能选择做火车从A到B.不过Alice很讨厌坐火车,火车上人比 ...

  9. Android:ImageView应用之图片浏览器

    ImageView控件实现的简单图片浏览器 一.纯显示图片: 引言: 读者在做这个东西的时候,需要自己把图片在源程序中导入. 读者要注意:所有导入的图片之前,图片的命名只可以是小写英文和数字. 效果图 ...

  10. js学习之道：js防止表单重复提交

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language="”javascript”"> var checkSubmi ...