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程序设计有所帮助。
相关文章
本文对如何利用iframe标签以及js制作时钟进行了全面解析，分步说明，条理清晰，感兴趣的朋友可以看下2016-12-12
JavaScript提供了丰富的属性操作方法,用于操作各种HTML元素,下面这篇文章主要给大家介绍了关于用js插入HTML元素的相关资料,文章通过代码介绍的非常详细,需要的朋友可以参考下2024-06-06
这篇文章介绍了js函数排序的代码，有需要的朋友可以参考一下2013-07-07
javascript实现选中复选框后相关输入框变灰不可用的方法
这篇文章主要介绍了javascript实现选中复选框后相关输入框变灰不可用的方法,涉及javascript针对页面元素属性的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
本文主要介绍了js实现前端分页页码管理的具体方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要为大家介绍了TypeScript 工具泛型教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要向大家详细介绍了javascript函数表达式，帮助大家理解javascript函数表达式，感兴趣的朋友可以参考一下2016-02-02
Opacity.js...2007-01-01
typescript使用 ?. ?? ??= 运算符的方法步骤
本文主要介绍了typescript使用 ?. ?? ??= 运算符的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
这篇文章主要介绍了微信小程序实现的涂鸦功能,涉及微信小程序事件响应及画笔的相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2018-01-01
最新评论