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

JavaScript創(chuàng)建div的屬性和樣式

問題域：

如何由JavaScript創(chuàng)建div節(jié)點元素：

◆創(chuàng)建div節(jié)點元素的屬性；

◆創(chuàng)建div節(jié)點元素的樣式；

解決方案：

1.創(chuàng)建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.創(chuàng)建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.創(chuàng)建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實現(xiàn)動態(tài)創(chuàng)建DIV步驟
2. 解析CSS類class及id規(guī)范化命名
3. 詳解CSS定位屬性Position用法
4. CSS2.0中page-break-after屬性用法
5. 探究CSS中border:none;與border:0;的區(qū)別