JavaScript動態(tài)改變HTML頁面元素例如添加或刪除
可以通過JavaScript動態(tài)的改變HTML中的元素
向HTML中添加元素
首先需要創(chuàng)建一個標簽,然后向該標簽中添加相應(yīng)的內(nèi)容,然后將創(chuàng)建好的標簽添加到相應(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>測試文檔</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中的某個元素
<!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>測試文檔</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)文章
解決bootstrap中modal遇到Esc鍵無法關(guān)閉頁面
Bootstrap,來自 Twitter,是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它簡潔靈活,使得 Web 開發(fā)更加快捷。不過在使用的過程中,我們還是會遇到各種小問題,今天我們探討的就是個人在使用中遇到的一個小BUG的修復(fù)。2015-03-03基于JS實現(xiàn)簡單的隨機抽取幸運員工系統(tǒng)
這篇文章主要為大家詳細介紹了基于HTML+JavaScript實現(xiàn)簡單的隨機抽取幸運員工系統(tǒng),文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解一下2023-11-11JS實現(xiàn)遍歷不規(guī)則多維數(shù)組的方法
這篇文章主要介紹了JS實現(xiàn)遍歷不規(guī)則多維數(shù)組的方法,涉及javascript數(shù)組遞歸遍歷相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2018-03-03javascript對select標簽的控制(option選項/select)
html中的select標簽,也是asp.net中的asp:DropDownList控件,接下來介紹javascript對select標簽的控制,感興趣的朋友可以了解下,或許本文對你有所幫助2013-01-01js學習總結(jié)_基于數(shù)據(jù)類型檢測的四種方式(必看)
下面小編就為大家?guī)硪黄猨s學習總結(jié)_基于數(shù)據(jù)類型檢測的四種方式(必看)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07微信小程序數(shù)據(jù)監(jiān)聽器使用實例詳解
這篇文章主要介紹了微信小程序數(shù)據(jù)監(jiān)聽器使用實例,數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化,從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽器2023-04-04js監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解
下面小編就為大家?guī)硪黄猨s監(jiān)聽鍵盤事件的方法_原生和jquery的區(qū)別詳解。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10