JavaScript 動態建立div併為其新增文字

antzone發表於2017-03-13
JavaScript

實際應用中，可能需要根據實際需要動態的建立一個div，設定其中的文字內容。

下面簡單介紹一下如何實現此功能。

最初的html程式碼：

[HTML] 純文字檢視 複製程式碼
<body> 
<div id="box"></div>
</body> 
</html>

要在上面的div中動態的新增一個新的div，並且新div中有指定的文字。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼
var odiv=document.createElement("div"); 
var text=document.createTextNode("螞蟻部落歡迎您"); 
odiv.appendChild(text)

以上程式碼建立了一個div節點和文字節點，然後將文字節點新增到div節點中去。

下面就是最終程式碼:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>建立div節點和文字節點-螞蟻部落</title> 
<script type="text/javascript">  
var odiv=document.createElement("div"); 
var text=document.createTextNode("螞蟻部落歡迎您"); 
odiv.appendChild(text); 
window.onload=function(){
  var box=document.getElementById("box");
  box.appendChild(odiv);
}
</script>  
<body> 
<div id="box"></div>
</body> 
</html>

以上程式碼是完整的版本，非常的簡單，這裡就不多介紹了。

相關閱讀：

（1）.createElement方法參閱JavaScript createElement()一章節。 

（2）.createTextNode方法參閱JavaScript createTextNode()一章節。

相關文章