JavaScript動(dòng)態(tài)改變HTML頁(yè)面元素例如添加或刪除
更新時(shí)間：2014年08月10日 16:34:04 投稿：whsnow
HTML頁(yè)面元素可以通過(guò)js動(dòng)態(tài)改變，比如可以向HTML中添加元素或刪除某個(gè)元素，下面為示例代碼，感興趣的朋友不要錯(cuò)過(guò)
可以通過(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)文章
AI的興起，使得大家對(duì)算法的關(guān)注也越來(lái)越高。而作為一個(gè)前端工程師，算法很多時(shí)候是我們的弱點(diǎn)，本文譯自國(guó)外一篇面試題。列出了一些簡(jiǎn)單算是跟算法相關(guān)的面試題2018-04-04
JavaScript實(shí)現(xiàn)將網(wǎng)頁(yè)加入收藏夾功能
瀏覽器出于安全和隱私的考慮,限制了用代碼將網(wǎng)頁(yè)加入瀏覽器的收藏夾,本文主要介紹了如何使用通過(guò)一些間接的方法實(shí)現(xiàn)這一功能,有需要的可以參考下2024-10-10
原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例
下面小編就為大家分享一篇原生JS實(shí)現(xiàn)ajax與ajax的跨域請(qǐng)求實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
2009-06-06
這篇文章給大家介紹了greenbrower用到的function.js代碼集合，感興趣的朋友一起看看吧2007-12-12
JS關(guān)閉窗口或JS關(guān)閉頁(yè)面的幾種代碼分享
這篇文章介紹了JS關(guān)閉窗口或JS關(guān)閉頁(yè)面的幾種代碼，有需要的朋友可以參考一下2013-10-10
JavaScript樹形組件實(shí)現(xiàn)無(wú)限級(jí)樹形結(jié)構(gòu)
這篇文章主要介紹了JavaScript樹形組件實(shí)現(xiàn)無(wú)限級(jí)樹形結(jié)構(gòu)，一種構(gòu)建多級(jí)有序樹形結(jié)構(gòu)JSON（或XML）數(shù)據(jù)源的方法，下面更多相關(guān)資料需要的小伙伴可以參考一下2022-03-03
探索瀏覽器頁(yè)面關(guān)閉window.close()的使用詳解
這篇文章主要介紹了探索瀏覽器頁(yè)面關(guān)閉window.close()的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
JavaScript實(shí)現(xiàn)下拉列表框數(shù)據(jù)增加、刪除、上下排序的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)下拉列表框數(shù)據(jù)增加、刪除、上下排序的方法,涉及javascript針對(duì)頁(yè)面下拉列表框元素的添加、刪除及移動(dòng)的相關(guān)技巧,具有一定參考借鑒,需要的朋友可以參考下2015-08-08
這篇文章主要為大家分享了B/S(Web)實(shí)時(shí)通訊的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04