js實現(xiàn)網(wǎng)頁收藏功能
更新時間：2015年12月17日 09:58:13 投稿：lijiao
這篇文章主要介紹了js實現(xiàn)動態(tài)添加或刪除網(wǎng)址功能，以及js實現(xiàn)網(wǎng)頁收藏功能，感興趣的小伙伴們可以參考一下
本文實例講述了js實現(xiàn)動態(tài)添加或刪除網(wǎng)址功能的方法。分享給大家供大家參考，具體如下：
運行效果圖：
具體代碼如下
<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");
//動態(tài)創(chuàng)建節(jié)點
var link = document.createElement("a");
link.setAttribute("href",url); //設(shè)置屬性
link.innerHTML = name;
//增加刪除的按鈕
var button = document.createElement("input");
button.setAttribute("type","button");
button.value = "刪除";
/**
(1).event對象表示對象的狀態(tài)，提供了對象的相關(guān)細節(jié),IE瀏覽器被
存儲在 Window 對象的 event 屬性中。
(2).srcElement屬性是對于生成事件的 Window 對象、Document 對象或 Element 對象的引用
(3).parentNode 屬性返回指定節(jié)點的父節(jié)點。
(4).removeChild() 方法刪除子節(jié)點。
**/
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("刪除成功");
}
//添加生成的內(nèi)容
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">
網(wǎng)址：<input type="text" name="url" id="url">
<input type="button" value="增加" onclick="add()">
<div id="list">
</div>
</body>
</html>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
前幾天在朋友的iPhone上面玩了一個連鎖泡泡游戲，頭腦發(fā)熱就想用js寫一個。2009-09-09
簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析
這篇文章主要介紹了簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語言，TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型，幫助我們更好地定義和操作數(shù)據(jù)，下面小編就來和大家詳細聊聊這些數(shù)據(jù)類型的相關(guān)知識吧2023-06-06
如原來的onClick=="alert("a");"，增加后變成onclick="alert("a");return false;"。 如果用腳本實現(xiàn)動態(tài)增加上去？ 謝謝！2008-07-07
這篇文章主要介紹了JS實現(xiàn)可視化音頻效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
js 調(diào)整select 位置的函數(shù)，向上移動，向下移動，移動到最上，移動到最后 這里把項目中寫過的幾個js函數(shù)來給大家分享，功能是通過js來實現(xiàn)對select 中的option的位置進行移動，代碼如下2008-02-02
這篇文章主要介紹了JavaScript控制瀏覽器全屏顯示,結(jié)合簡單實例形式分析了JavaScript響應(yīng)鼠標事件控制瀏覽器全屏顯示與退出全屏顯示相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
Javascript學習之談?wù)凧S的全局變量跟局部變量(推薦)
這篇文章主要介紹了Javascript學習之談?wù)凧S的全局變量跟局部變量雖然腳本之家小編以前發(fā)過，但還是這篇文章整理的比較好，需要的朋友可以參考一下2016-08-08
這篇文章主要給大家介紹了關(guān)于一次Webpack配置文件的分離實戰(zhàn)記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
假設(shè)待排序的記錄存放在數(shù)組R[1..n]中。初始時，R[1]自成1個有序區(qū)，無序區(qū)為R[2..n]。從i=2起直至i=n為止，依次將R[i]插入當前的有序區(qū)R[1..i-1]中，生成含n個記錄的有序區(qū)。2011-04-04