JavaScript动态创建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> 

【编辑推荐】