js動態建立div再新增文字程式碼

admin發表於2017-03-23
JS

本章節介紹一下如何利用javascript動態建立一個div，並新增文字。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>螞蟻部落</title> 
<script type="text/javascript">
window.onload=function(){
  var odiv=document.createElement("div");
  odiv.style.width="200px";
  odiv.style.height="100px";
  odiv.style.backgroundColor="green";
  odiv.style.textAlign="center";
  odiv.style.lineHeight="100px";
  var otxt=document.createTextNode("螞蟻部落");
  odiv.appendChild(otxt);
  document.body.appendChild(odiv)
}
</script>  
<body>
</body>
</html>

以上程式碼實現了我們的要求，建立了一個div元素節點，然後設定div的一些樣式屬性，再建立一個文字節點，並設定文字內容，並將文字節點新增到div中，最後將div新增到body中。

相關文章