JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除
可以通過(guò)JavaScript動(dòng)態(tài)的改變HTML中的元素
向HTML中添加元素
首先需要?jiǎng)?chuàng)建一個(gè)標(biāo)簽,然后向該標(biāo)簽中添加相應(yīng)的內(nèi)容,然后將創(chuàng)建好的標(biāo)簽添加到相應(yīng)的位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>測(cè)試文檔</title> <script type="text/javascript"> function add(){ var element = document.createElement("p"); var node = document.createTextNode("添加新段落"); element.appendChild(node); x = document.getElementById("demo"); x.appendChild(element); } </script> </head> <body> <div id="demo"> <p>這是第一段</p> </div> <input type="button" value="按鈕" onclick="add()" /> </body> </html>
刪除HTML中的某個(gè)元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>測(cè)試文檔</title> <script type="text/javascript"> function deleteE(){ var father = document.getElementById("demo"); var child = document.getElementById("p1"); father.removeChild(child); } </script> </head> <body> <div id="demo"> <p id="p1">這是第一段</p> <p id="p2">這是第二段</p> </div> <input type="button" value="刪除" onclick="deleteE()" /> </body> </html>
相關(guān)文章
JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕字體放大、縮小
字體可以調(diào)節(jié)大小,極大了滿足了用戶體驗(yàn)度,接下來(lái)通過(guò)本文給大家介紹JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕字體放大、縮小實(shí)例代碼,需要的朋友參考下吧2016-02-02解決bootstrap中modal遇到Esc鍵無(wú)法關(guān)閉頁(yè)面
Bootstrap,來(lái)自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡(jiǎn)潔靈活,使得 Web 開(kāi)發(fā)更加快捷。不過(guò)在使用的過(guò)程中,我們還是會(huì)遇到各種小問(wèn)題,今天我們探討的就是個(gè)人在使用中遇到的一個(gè)小BUG的修復(fù)。2015-03-03基于JS實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)抽取幸運(yùn)員工系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了基于HTML+JavaScript實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)抽取幸運(yùn)員工系統(tǒng),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法
這篇文章主要介紹了JS實(shí)現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實(shí)現(xiàn)與使用技巧,需要的朋友可以參考下2018-03-03javascript對(duì)select標(biāo)簽的控制(option選項(xiàng)/select)
html中的select標(biāo)簽,也是asp.net中的asp:DropDownList控件,接下來(lái)介紹javascript對(duì)select標(biāo)簽的控制,感興趣的朋友可以了解下,或許本文對(duì)你有所幫助2013-01-01js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類型檢測(cè)的四種方式(必看)
下面小編就為大家?guī)?lái)一篇js學(xué)習(xí)總結(jié)_基于數(shù)據(jù)類型檢測(cè)的四種方式(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07微信小程序數(shù)據(jù)監(jiān)聽(tīng)器使用實(shí)例詳解
這篇文章主要介紹了微信小程序數(shù)據(jù)監(jiān)聽(tīng)器使用實(shí)例,數(shù)據(jù)監(jiān)聽(tīng)器用于監(jiān)聽(tīng)和響應(yīng)任何屬性和數(shù)據(jù)字段的變化,從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽(tīng)器2023-04-04js監(jiān)聽(tīng)鍵盤(pán)事件的方法_原生和jquery的區(qū)別詳解
下面小編就為大家?guī)?lái)一篇js監(jiān)聽(tīng)鍵盤(pán)事件的方法_原生和jquery的區(qū)別詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10