js实现网页收藏功能


Posted in Javascript onDecember 17, 2015

本文实例讲述了js实现动态添加或删除网址功能的方法。分享给大家供大家参考,具体如下:

运行效果图:

js实现网页收藏功能

js实现网页收藏功能

具体代码如下

<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>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
Nov 10 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
bootstrap table表格客户端分页实例
Aug 07 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
详解javascript中原始数据类型Null和Undefined
Dec 17 #Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 #Javascript
JS数组合并push与concat区别分析
Dec 17 #Javascript
理解Javascript的call、apply
Dec 16 #Javascript
javascript实现网站加入收藏功能
Dec 16 #Javascript
javascript实现无缝上下滚动特效
Dec 16 #Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
jQuery 获取对象 基本选择与层级
2010/05/31 Javascript
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JavaScript判断浏览器类型的方法
2015/02/10 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
理解javascript封装
2016/02/23 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
angular6 填坑之sdk的方法
2018/12/27 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Cpy和Python的效率对比
2015/03/20 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
PyQt5响应回车事件的方法
2019/06/25 Python
英语专业毕业个人求职自荐信
2013/09/21 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
技术比武方案
2014/05/19 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书