JavaScript動態改變HTML頁面元素例如新增或刪除_javascript技巧
動態改變
頁面元素
可以透過JavaScript動態的改變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 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>
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)