js实现网页收藏功能
更新时间：2015年12月17日 09:58:13 投稿：lijiao
这篇文章主要介绍了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实现简易计算器功能的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
javascript+jQuery实现360开机时间显示效果
这篇文章主要介绍了javascript+jQuery实现360开机时间显示效果，在文中给大家提到了js实现时间倒计时的代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
下面小编就为大家带来一篇javascript获取指定区间范围随机数的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本篇文章主要介绍了js在微信、微博、QQ、Safari唤起App的解决方案，有这方面需要的朋友参考下吧。2018-01-01
Web系统中，从一个网页跳转到另一个网页，是LAMP项目中最常用的技术之一。页面跳转可能是由于用户单击链接、按钮等引发的，也可能是系统自动产生的。 此处介绍PHP中常用的实现页面自动跳转的方法。2015-04-04
这篇文章主要介绍了taro 实现购物车逻辑，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06
这篇文章主要介绍了javascript实现获取浏览器版本，javascript实现获取浏览器类型两大方面，对这方面感兴趣的朋友可以参考一下2015-12-12
这篇文章主要为大家介绍了MySQL SUM Function函数使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要介绍了在小程序中使用腾讯视频插件播放教程视频的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
今天在使用uni-app开发登录页面时遇到一个需求，需要禁用返回按钮,下面这篇文章主要给大家介绍了关于uni-app禁用返回按钮/返回键的具体实现,需要的朋友可以参考下2022-11-11
最新评论