JavaScript 创设 Div

JavaScript 创建 Div

JavaScript创建div的属性和样式
关键字: javascript创建div的属性和样式
问题域：
如何由JavaScript创建div节点元素：
                 创建div节点元素的属性；
                 创建div节点元素的样式；

解决方案：
1.创建div元素：

Javascript代码
1.<script type="text/javascript">  
2.      function createElement(){  
3.    var createDiv = document.createElement("div");  
4.    createDiv.innerHTML = "Test create a div element!";  
5.    document.body.appendChild(createDiv);  
6.       }  
7.</script> 
<script type="text/javascript">
      function createElement(){
 var createDiv = document.createElement("div");
 createDiv.innerHTML = "Test create a div element!";
 document.body.appendChild(createDiv);
       }
</script>

 

2.创建div的属性：

 

Javascript代码
1.<script type="text/javascript">  
2.    function createElement(){  
3.    var createDiv = document.createElement("div");  
4.    createDiv.title="this is a new div.";  
5.         createDiv.id="newDivId";  
6.    createDiv.className = "newDivClass";      
7.    createDiv.innerHTML = "Test create a div element!";  
8.    document.body.appendChild(createDiv);  
9.     }  
10.</script> 
<script type="text/javascript">
    function createElement(){
 var createDiv = document.createElement("div");
 createDiv.title="this is a new div.";
         createDiv.id="newDivId";
 createDiv.className = "newDivClass"; 
 createDiv.innerHTML = "Test create a div element!";
 document.body.appendChild(createDiv);
     }
</script>

 

3.创建div的样式：

 

Javascript代码
1.<script type="text/javascript">  
2. 
3.     function createElement(){  
4.    var createDiv = document.createElement("div");  
5.    createDiv.style.background = "pink";  
6.         createDiv.style.border="1px solid red";  
7.    createDiv.style.width = "50px";  
8.    createDiv.style.height = "50px";  
9.    createDiv.innerHTML = "Test create a div element!";  
10.    document.body.appendChild(createDiv);  
11.      }   
12.</script>