JavaScript动态创建div属性和样式

JavaScript动态创建div属性和样式以及删除div
本文向大家介绍一下如何使用JavaScript创建div节点元素，主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容，相信本文介绍一定会让你有所收获。

JavaScript创建div的属性和样式
问题域：
如何由JavaScript创建div节点元素：
◆创建div节点元素的属性；
◆创建div节点元素的样式；
解决方案：
1.创建div元素：
Javascript代码
1.<scripttype scripttype="text/javascript">
2.functioncreateElement(){
3.var createDiv=document.createElement("div");
4.createDiv.innerHTML="Testcreateadivelement!";
5.document.body.appendChild(createDiv);
6.}
7.</script>
8.
9.<scripttype scripttype="text/javascript">
10.functioncreateElement(){
11.varcreateDiv=document.createElement("div");
12.createDiv.innerHTML="Testcreateadivelement!";
13. document.body.appendChild(createDiv);
14.}
15.</script>
16.
2.创建div的属性：
Javascript代码
1.<scripttype scripttype="text/javascript">
2.functioncreateElement(){
3.varcreateDiv=document.createElement("div");
4.createDiv.title="thisisanewdiv.";
5.createDiv.id="newDivId";
6.createDiv.class="newDivClass";
7.createDiv.innerHTML="Testcreateadivelement!";
8.document.body.appendChild(createDiv);
9.}
10.</script>
11.
12.<scripttype scripttype="text/javascript">
13.functioncreateElement(){
14.varcreateDiv=document.createElement("div");
15.createDiv.title="thisisanewdiv.";
16.createDiv.id="newDivId";
17.createDiv.class="newDivClass";
18.createDiv.innerHTML="Testcreateadivelement!";
19. document.body.appendChild(createDiv);
20.}
21.</script>
22.
3.创建div的样式：
Javascript代码
1.<scripttype scripttype="text/javascript">
2.
3.functioncreateElement(){
4.varcreateDiv=document.createElement("div");
5.createDiv.style.background="pink";
6.createDiv.style.border="1pxsolidred";
7.createDiv.style.width="50px";
8.createDiv.style.height="50px";
9.createDiv.innerHTML="Testcreateadivelement!";
10.document.body.appendChild(createDiv);
11.}
12.</script>
本文向大家描述一下如何使用Javascript动态创建DIV，首先看一下原来的CSS样式，然后动态创建DIV，把DIV元素增加到HTML里面，相信本文介绍你会学到很多。

Javascript动态创建DIV
这是原来的CSS样式
1..item{float:left;overflow:hidden;margin-left:8px;
2.margin-top:10px;width:320px;height:250px;
3.background-repeat:no-repeat;
4.background-image:url(../images/bgred.jpg)}
5..curve{position:relative;width:320px;height:250px;
6.z-index:1;left:75px;top:-40px;}
7.
动态创建DIV代码如下:
1.for(j=0;j*8<str.length;j++)
2.{
3.varmyDIV=window.frames["displayFrame"]
4..document.createElement("DIV");
5.myDIV.setAttribute("id","itemDIV"+j);
6.myDIV.style.styleFloat="left";
7.myDIV.style.overflow="hidden";
8.myDIV.style.marginLeft="8px";
9.myDIV.style.marginTop="10px";
10.myDIV.style.width="320px";
11.myDIV.style.height="250px";
12.myDIV.style.backgroundRepeat="no-repeat";
13.myDIV.style.backgroundImage="url(image/bgred.jpg)"
14.window.frames["displayFrame"].document
15..body.appendChild(myDIV);
16.varcurveDIV=window.frames["displayFrame"]
17..document.createElement("DIV");
18.curveDIV.setAttribute("id","curveDIV"+j);
19.curveDIV.style.position="relative";
20.curveDIV.style.zIndex=1;
21.curveDIV.style.left="75px";
22.curveDIV.style.top="-40px";
23.curveDIV.style.width="320px";
24.curveDIV.style.height="250px";
25.window.frames["displayFrame"].document
26..getElementById("DIVitem"+j).appendChild(curveDIV);
27.}
28.
把DIV元素增加到HTML里面。

也可在HTML里面定义一个SPAN
1.window.frames["displayFrame"].document
2..getElementById("spanId").appendChild(myDIV);
3.window.frames["displayFrame"].document
4..body.appendChild(myDIV);
5.
IE和Firefox都支持.
◆另外需要注意的是这个CSS元素
浮动效果:float:left
在IE下代码为:myDIV.style.styleFloat="left";
在Firefox代码为:myDIV.style.cssFloat="left";
其他的诸如这种元素:
在CSS编写中一般是:margin-left:8px，而在动态增加需要去掉-:myDIV.style.marginLeft="8px"。

Javascript 删除div
var div = document.getElementById("DivId");
div.style.display = "none"; //隐藏而不删除
div.parentNode.removeChild(div); //删除。