<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. vue访问原生 DOM 事件

    <body> <div id="test"> <button @click="changeColor('你好',$event)"& ...

  2. Objective-C中单例模式的实现-备

    单例模式在Cocoa和Cocoa Touch中非常常见.比如这两个,[UIApplication sharedApplication]和[NSApplication sharedApplication ...

  3. css的!important规则对性能有影响吗

    最近在做项目中发现很多CSS代码里面都使用!important去覆盖原有高优先级的样式.按照常理来说,越是灵活的东西,需要做的工作就会更多.所以想当然的认为像!important这样灵活.方便的规则如 ...

  4. JavaScript 中的非真值

    False values 下面这些值将被计算出 false (also known as Falsy values): false undefined null 0 NaN 空字符串 ("& ...

  5. BZOJ1640: [Usaco2007 Nov]Best Cow Line 队列变换

    1640: [Usaco2007 Nov]Best Cow Line 队列变换 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 493  Solved: 2 ...

  6. SDL2.0教程翻译·目录

    原文地址:SDL 2.0 Tutorial Index Welcome! 下面的教程旨在为你提供一个SDL2.0以及c++中游戏设计和相关概念的介绍.在本教程中,我们假定你对C++有一定程度上的知识, ...

  7. windows 自动安装

    msiexec

  8. delphi算法

    /  求余 mod 取模 var a1,a2,a3 : Integer; b1,b2,b3 : Integer; c1,c2 : Integer;begin a1 := 987; //ShowMess ...

  9. 有利于SEO的DIV+CSS规范小结

    一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: ...

  10. AVC1与H264的差别

    今天上网时偶尔发现这个在我脑海里疑惑的问题的答案. H.264 Video Types The following media subtypes are defined for H.264 video ...