JavaScript 建立和刪除元素

admin發表於2017-03-20
JavaScript

實際應用中，往往需要動態的建立和刪除指定的元素。

下面通過程式碼例項介紹一下如何實現此功能。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thediv{
  width:200px;
  height:300px;
  border:1px solid green;
}
</style>
<script type = "text/javascript"> 
function creat(){ 
  var linkElement=document.createElement("a");
  linkElement.href="http://www.softwhy.com"; 
  linkElement.innerHTML="螞蟻部落"; 
  linkElement.id="theid";
  var odiv=document.getElementById("thediv");
  odiv.appendChild(linkElement); 
} 
function del(){ 
  var odiv=document.getElementById("thediv");
  odiv.removeChild(document.getElementById("theid")); 
} 
window.onload=function(){
  var creatBt=document.getElementById("creatBt");
  var deBt=document.getElementById("deBt");
  creatBt.onclick=function(){creat()}
  deBt.onclick=function(){del()}
}
</script> 
</head>
<body> 
<input type="button" id="creatBt" value="動態的建立一個超連結"/> 
<input type="button" id="deBt" value="動態的刪除新增的元素"/> 
<div id="thediv"></div> 
</body> 
</html>

點選相應按鈕可以新增或者刪除元素，程式碼很簡單就不多介紹。

相關閱讀：

（1）.document.createElement()參閱document.createElement()一章節。

（2）.removeChild()參閱JavaScript removeChild()一章節。  

相關文章