JavaScript动态创建div属性和样式示例代码

动态创建div属性和样式在某些情况下还是比较实用的，下面为大家详细介绍下js中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);
divFileitem.appendChild(divName); <!-- no "document" if not body-->
}
</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);
<!--Directly use 2 CSS class styles-->
createDiv.className = "name file_col";
}
</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>