JavaScript動態新增或者刪除HTML元素
web中,JavaScript是用來操作dom元素的,刪除和新增dom元素是最為基本的操作。
下面通過程式碼例項介紹一下如何新增或者刪除指定的元素。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> function add(){ var element=document.createElement("p"); var node=document.createTextNode("螞蟻部落二"); element.appendChild(node); obox= document.getElementById("box"); obox.appendChild(element); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ add() } } </script> </head> <body> <div id="box"> <p>螞蟻部落一</p> </div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
點選按鈕可以動態建立一個p元素,然後再向這個節點新增文字,最後將其新增到box元素中。
相關閱讀:
(1).createElement方法參閱JavaScript createElement()一章節。
(2).createTextNode方法參閱document.createTextNode()一章節。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> function add(){ var element=document.createElement("p"); var node=document.createTextNode("螞蟻部落二"); var obox= document.getElementById("box"); element.appendChild(node); obox.appendChild(element); } window.onload=function(){ var obt=document.getElementById("bt"); var odelete=document.getElementById("delete"); var obox= document.getElementById("box"); obt.onclick=function(){ add() } odelete.onclick=function(){ var obox= document.getElementById("box"); var ps=obox.getElementsByTagName("p"); obox.removeChild(ps[0]); } } removeChild </script> </head> <body> <div id="box"> <p>螞蟻部落一</p> </div> <input type="button" id="bt" value="新增元素"/> <input type="button" id="delete" value="刪除元素"/> </body> </html>
上面的程式碼可以刪除第一個p元素。
removeChild方法可以參閱JavaScript removeChild()一章節。
相關文章
- JavaScript 動態新增與刪除元素JavaScript
- JavaScript 陣列新增或者刪除元素JavaScript陣列
- JavaScript動態新增和刪除div元素JavaScript
- javascript如何動態新增和刪除元素JavaScript
- javascript如何動態刪除或者新增物件屬性JavaScript物件
- 動態的新增或者刪除指定元素程式碼例項
- html元素的動態新增和刪除程式碼例項HTML
- javascript動態刪除或者新增table表格行程式碼例項JavaScript行程
- 將資料存放於html元素或者從html元素刪除HTML
- JavaScript點選新增行或者刪除行JavaScript
- jQuery動態新增或刪除<input type="file">元素jQuery
- JavaScript動態新增li元素JavaScript
- JavaScript動態生成html元素JavaScriptHTML
- JavaScript陣列開頭或者結尾刪除元素JavaScript陣列
- jquery為指定的元素新增或者刪除指定樣式類jQuery
- javascript刪除或者新增option選項例項程式碼JavaScript
- javascript新增或者刪除table表格行程式碼例項JavaScript行程
- jQuery實現的為元素新增或者刪除class樣式類jQuery
- javascript動態刪除和新增表格行程式碼例項JavaScript行程
- javascript實現的動態新增和刪除表格行程式碼JavaScript行程
- jQuery動態新增和刪除表格行jQuery
- JavaScript刪除陣列元素JavaScript陣列
- JavaScript 建立和刪除元素JavaScript
- jquery動態新增和刪除<input type="file" />jQuery
- 如何動態新增和刪除一個div
- Android中ListView動態新增刪除項AndroidView
- jQuery動態新增和刪除表格記錄jQuery
- jQuery為元素新增和刪除classjQuery
- jQuery如何新增和刪除元素jQuery
- JavaScript 刪除陣列指定元素JavaScript陣列
- JavaScript 刪除指定的li元素JavaScript
- JavaScript刪除array陣列元素JavaScript陣列
- HTML5新增的元素和廢除的元素HTML
- 點選新增或者刪除表格行詳解
- javascript新增刪除cookie程式碼JavaScriptCookie
- Hyperledger Fabric組織的動態新增和刪除
- Hyperledger Fabric節點的動態新增和刪除
- JavaScript 刪除陣列重複元素JavaScript陣列