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