JavaScript动态创建div等元素实例

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

    <html>  
        <head>  
        <title>js动态创建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();//创建div  
            Test.appendDivChild();//为追加子div  
            Test.createSelect();//创建下拉框  
            Test.createRadio();//创建单选按钮  
        </script>  
        <select>  
            <option>1</option>  
            <option>2</option>  
            <option>3</option>  
        </select>  
        </body>  
    </html>