js實(shí)現(xiàn)網(wǎng)頁(yè)收藏功能
本文實(shí)例講述了js實(shí)現(xiàn)動(dòng)態(tài)添加或刪除網(wǎng)址功能的方法。分享給大家供大家參考,具體如下:
運(yùn)行效果圖:
具體代碼如下
<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"); //動(dòng)態(tài)創(chuàng)建節(jié)點(diǎn) 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對(duì)象表示對(duì)象的狀態(tài),提供了對(duì)象的相關(guān)細(xì)節(jié),IE瀏覽器被 存儲(chǔ)在 Window 對(duì)象的 event 屬性中。 (2).srcElement屬性是對(duì)于生成事件的 Window 對(duì)象、Document 對(duì)象或 Element 對(duì)象的引用 (3).parentNode 屬性返回指定節(jié)點(diǎn)的父節(jié)點(diǎn)。 (4).removeChild() 方法刪除子節(jié)點(diǎn)。 **/ 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> 站點(diǎn)名稱:<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>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
簡(jiǎn)單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過(guò)程解析
這篇文章主要介紹了簡(jiǎn)單實(shí)現(xiàn)節(jié)流函數(shù)和防抖函數(shù)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10一文詳解TypeScript中的內(nèi)置數(shù)據(jù)類型
作為一門類型安全的編程語(yǔ)言,TypeScript?提供了多種內(nèi)置數(shù)據(jù)類型,幫助我們更好地定義和操作數(shù)據(jù),下面小編就來(lái)和大家詳細(xì)聊聊這些數(shù)據(jù)類型的相關(guān)知識(shí)吧2023-06-06兼容firefox的給每一個(gè)onClick再附加一個(gè)事件
如原來(lái)的onClick=="alert("a");",增加后變成onclick="alert("a");return false;"。 如果用腳本實(shí)現(xiàn)動(dòng)態(tài)增加上去? 謝謝!2008-07-07JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)可視化音頻效果的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01Javascript學(xué)習(xí)之談?wù)凧S的全局變量跟局部變量(推薦)
這篇文章主要介紹了Javascript學(xué)習(xí)之談?wù)凧S的全局變量跟局部變量雖然腳本之家小編以前發(fā)過(guò),但還是這篇文章整理的比較好,需要的朋友可以參考一下2016-08-08一次Webpack配置文件的分離實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于一次Webpack配置文件的分離實(shí)戰(zhàn)記錄,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11javascript算法學(xué)習(xí)(直接插入排序)
假設(shè)待排序的記錄存放在數(shù)組R[1..n]中。初始時(shí),R[1]自成1個(gè)有序區(qū),無(wú)序區(qū)為R[2..n]。從i=2起直至i=n為止,依次將R[i]插入當(dāng)前的有序區(qū)R[1..i-1]中,生成含n個(gè)記錄的有序區(qū)。2011-04-04