本文介绍如何使用JavaScript实现网页收藏的动态添加与删除功能。通过获取用户输入的名称和网址，动态创建链接节点并插入列表，同时提供删除按钮以移除指定收藏项。代码包含完整的前端HTML结构与JS逻辑，适合初学者参考学习DOM节点创建与事件处理。
JavaScript动态添加与删除网页收藏功能实现
本文通过一个具体实例，详细讲解了利用JavaScript动态添加或删除网址收藏的方法。内容旨在为读者提供实用的参考代码与思路。
以下是该功能运行时的效果展示：
具体的实现代码如下所示：
<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开发者有所帮助。