JavaScript動態(tài)創(chuàng)建div等元素實例講解

更新時間：2016年01月06日 16:27:52 作者：偽磚家

這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建div等元素實例，

本文實例講解了JavaScript動態(tài)創(chuàng)建div等元素的詳細代碼，分享給大家供大家參考，具體內容如下

效果圖：

為了節(jié)省時間，就直接貼代碼了！

<html> 
  <head> 
  <title>js動態(tài)創(chuàng)建div等元素實例</title> 
  <style type="text/css"> 
  </style> 
  </head> 
  <body> 
  <script language="javascript"> 
    var Test={ 
      createDiv:function(){ 
        var div = document.createElement('div'); 
        div.id="createDiv"; 
        div.style.cssText = 'border:1px solid red; width:200px; z-index:100; height:20px;'; 
        document.body.appendChild(div); 
      }, 
      appendDivChild:function(){ 
        var div = document.createElement('div'); 
        div.id="appendDivChild"; 
        div.style.cssText = 'border:1px solid green; width:400px; z-index:100; height:100px;'; 
        var childDiv= document.createElement('div'); 
        childDiv.id="childDiv"; 
        childDiv.style.cssText = 'border:2px solid gray; width:200px; z-index:100; height:50px;'; 
        div.appendChild(childDiv); 
        document.body.appendChild(div); 
      }, 
      createSelect:function(){ 
        var select=document.createElement('select'); 
        select.id="select"; 
        var option1=document.createElement('option'); 
        option1.value=1; 
        option1.text=1;//非ie,添加內容 
        option1.innerHTML=1;//ie,添加內容 
        select.appendChild(option1); 
        var option2=document.createElement('option'); 
        option2.value=2; 
        option2.text=2; 
        option2.innerHTML=2; 
        select.appendChild(option2); 
        var option3=document.createElement('option'); 
        option3.value=3; 
        option3.text=1; 
        option3.innerHTML=3; 
        select.appendChild(option3); 
        document.body.appendChild(select); 
      }, 
      createRadio:function(){ 
        var radio=document.createElement('input'); 
        radio.id='radio'; 
        radio.type="radio"; 
        radio.width="100"; 
        var label=document.createElement('label'); 
        label.text="男"; 
        label.innerHTML="男"; 
        document.body.appendChild(radio); 
        document.body.appendChild(label); 
      } 
    }; 
    Test.createDiv();//創(chuàng)建div 
    Test.appendDivChild();//為追加子div 
    Test.createSelect();//創(chuàng)建下拉框 
    Test.createRadio();//創(chuàng)建單選按鈕 
  </script> 
  <select> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
  </select> 
  </body> 
</html>

希望本文所述對大家學習javascript程序設計有所幫助。

您可能感興趣的文章: