javascript動態建立元素程式碼例項

antzone發表於2017-03-17
JavaScript

在實際應用中，可能需要根據實際的需求動態的建立元素以供使用，下面是一段簡單的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
var addItems=function() 
{ 
  document.getElementById("thediv").innerHTML=""; 
  var value=parseInt(document.getElementById('itemsNumber').value); 
  for(var i = 0; i < value; i++) 
  { 
    var input = document.createElement("input"); 
    input.setAttribute("type", "text"); 
    var br = document.createElement("br"); 
    document.getElementById("thediv").appendChild(input); 
    document.getElementById("thediv").appendChild(br); 
  } 
} 
window.onload=function()
{
  var btn=document.getElementById("btn");
  btn.onclick=function()
  {
    addItems();
  }
}
</script> 
</head> 
<body> 
<input type="text" id="itemsNumber"> 
<input type="button" id="btn" value="點選建立" /> 
<div id="thediv"></div> 
</body> 
</html>

以上程式碼可以建立指定屬性的文字框，只要在文字框中輸入數量，然後點選建立按鈕即可。

相關文章