本文向大家介紹一下如何使用JavaScript創建div節點元素，主要包括創建div節點元素的屬性和創建div節點元素的樣式兩大部分內容，相信本文介紹一定會讓你有所收獲。

JavaScript創建div的屬性和樣式

問題域：

如何由JavaScript創建div節點元素：

◆創建div節點元素的屬性；

◆創建div節點元素的樣式；

解決方案：

1.創建div元素：

Javascript代碼

<scripttypescripttype="text/javascript"> 
functioncreateElement(){  
varcreateDiv=document.createElement("div");  
createDiv.innerHTML="Testcreateadivelement!";  
document.body.appendChild(createDiv);  
}  
</script> 
 
<scripttypescripttype="text/javascript"> 
functioncreateElement(){  
 varcreateDiv=document.createElement("div");  
 createDiv.innerHTML="Testcreateadivelement!";  
 document.body.appendChild(createDiv);  
}  
</script> 
 

 2.創建div的屬性：

Javascript代碼

<scripttypescripttype="text/javascript"> 
functioncreateElement(){  
varcreateDiv=document.createElement("div");  
createDiv.title="thisisanewdiv.";  
createDiv.id="newDivId";  
createDiv.class="newDivClass";  
createDiv.innerHTML="Testcreateadivelement!";  
document.body.appendChild(createDiv);  
}  
</script> 
 
<scripttypescripttype="text/javascript"> 
functioncreateElement(){  
 varcreateDiv=document.createElement("div");  
 createDiv.title="thisisanewdiv.";  
createDiv.id="newDivId";  
 createDiv.class="newDivClass";   
 createDiv.innerHTML="Testcreateadivelement!";  
 document.body.appendChild(createDiv);  
}  
</script> 
 

 3.創建div的樣式：

Javascript代碼

<scripttypescripttype="text/javascript"> 
 
functioncreateElement(){  
varcreateDiv=document.createElement("div");  
createDiv.style.background="pink";  
createDiv.style.border="1pxsolidred";  
createDiv.style.width="50px";  
createDiv.style.height="50px";  
createDiv.innerHTML="Testcreateadivelement!";  
document.body.appendChild(createDiv);  
}  
</script> 
 

【編輯推薦】

1. Javascript實現動態創建DIV步驟
2. 解析CSS類class及id規范化命名
3. 詳解CSS定位屬性Position用法
4. CSS2.0中page-break-after屬性用法
5. 探究CSS中border:none;與border:0;的區別