1. <html>
  2.  <head>
  3.   <title> 动态添加删除网址 </title>
  4.   <meta charset="utf-8">
  5.   <script>
  6.         function add(){
  7.             var name = document.getElementById("name").value;
  8.             var url = document.getElementById("url").value;
  9.             var list = document.getElementById("list");
  10.             //动态创建节点
  11.             var link = document.createElement("a");
  12.             link.setAttribute("href",url);  //设置属性
  13.             link.innerHTML = name;
  14.             //增加删除的按钮
  15.             var button = document.createElement("input");
  16.             button.setAttribute("type","button");
  17.             button.value = "删除";
  18.             /**
  19.                 (1).event对象表示对象的状态，提供了对象的相关细节,IE浏览器被
  20.                 存储在 Window 对象的 event 属性中。
  21.                 (2).srcElement属性是对于生成事件的 Window 对象、Document 对象或 Element 对象的引用
  22.                 (3).parentNode 属性返回指定节点的父节点。
  23.                 (4).removeChild() 方法删除子节点。
  24.             **/
  25.             button.onclick = function(event){
  26.                 var target;
  27.                 if (event == null)
  28.                 {
  29.                     target = window.event.srcElement;
  30.                 }else{
  31.                     target = event.target;
  32.                 }
  33.                 var div = target.parentNode;
  34.                 div.parentNode.removeChild(div);
  35.                 alert("删除成功");
  36.             }
  37.             //添加生成的内容
  38.             var div = document.createElement("div");
  39.             div.appendChild(button);
  40.             div.insertBefore(link,button);
  41.             list.appendChild(div);
  42.             }
  43.   </script>
  44.  </head>
  45.  <body>
  46.  <hr>
  47.   站点名称：<input type="text" name="name" id="name">
  48.   网址：<input type="text" name="url" id="url">
  49.   <input type="button" value="增加" onclick="add()">
  50.   <div id="list">
  51.   </div>
  52.  </body>
  53. </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. Entity Framewor 学习笔记 (碎碎的东西)

    Proxy 类代理类是为了让EF实现lazy load才需要的 public class BloggingContext : DbContext {     public BloggingContex ...

  2. WINDOWS基本数据类型示例

    最近也学学这些,争取把所有东东都串起来. #include <Windows.h> #include <stdio.h> int WINAPI WinMain( HINSTAN ...

  3. Android中支持的常用距离单位

    px(像素):每个px对应屏幕上的一个点.dip或dp(device independent pixels,设备独立像素):一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dip=1px.但 ...

  4. ~/.bashrc的常用alias设置

    centos6.5系统中,alias定义在/etc/bashrc,分别写在/etc/profile.d/*.sh中,可以在此目录添加my.sh, alias attrib='chmod'alias c ...

  5. HDU_2040——判断亲和数

    Problem Description 古希腊数学家毕达哥拉斯在自然数研究中发现,220的所有真约数(即不是自身的约数)之和为: 1+2+4+5+10+11+20+22+44+55+110＝284.  ...

  6. Objective-C实现变参函数

    原文:http://www.tanhao.me/pieces/1104.html   NSLog(NSString *format, ...)   + (id)arrayWithObjects:(id ...

  7. ERP售前顾问形象寓意

    几个做销售的朋友一起去X山旅游,一群爱侃的人凑在一起,一顿云山雾罩的神吹是少不了的.突然看到一栋平房前面伸出一个大大的幌子:铁嘴铜牙.下面一行小字:不灵不要钱(管理专家:提供专业解决方案). 销售都是 ...

  8. sourceTree初识

    GUI for git|SourceTree|入门基础 目录 SourceTree简介 SourceTree基本使用 SourceTree&Git部分名词解释 相关连接推荐 一.SourceT ...

  9. SQL - 配置SQLServer 使其可以远程访问

    环境: SQL Server2008 R2 SQL Server Management Studio 今天测试部署项目的时候,发现不能远程访问SQL Server.具体情形就是在Management ...

  10. phpstorm + xdebug 配置

    PHPSTORM版本 : 8.0.1 PHP版本 : 5.6.2 把php-xdebug.dll复制到xamapp/php/ext目录下,打开php.ini配置如下参数 [xdebug] zend_e ...