JavaScript動態建立div並寫入文字

admin發表於2018-10-27
JavaScript

本文介紹一下如何利用JavaScript動態建立div元素，然後在其中寫入文字。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<script> 
window.onload=function(){
  let odiv=document.createElement("div");
  let textNode=document.createTextNode("螞蟻部落");
  odiv.appendChild(textNode);
  odiv.style.color="blue";
  document.body.appendChild(odiv);
}
</script>
</head> 
<body>
</body> 
</html>

上述程式碼實現了我們的需求，程式碼分析如下：

（1）.通過document.createElement方法建立一個div元素節點。

（2）.document.createTextNode方法建立一個文字節點，並設定文字內容為"螞蟻部落"。

（3）.odiv.appendChild方法將文字節點追加到div元素中，到現在頁面依然沒有任何內容，因為雖然元素節點物件和文字節點物件都已經建立，但是並沒有被新增到頁面被瀏覽器渲染，雖然還需要最後一步將其新增到body中，使用document.body.appendChild(odiv)即可實現。

相關文章