本文實(shí)例講述了js實(shí)現(xiàn)動(dòng)態(tài)添加或刪除網(wǎng)址功能的方法。分享給大家供大家參考,具體如下:
運(yùn)行效果圖:


具體代碼如下
<html> <head> <title>武林網(wǎng)</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)名稱(chēng):<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ì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注