本文实例讲解了JavaScript动态创建div等元素的详细代码，分享给大家供大家参考，具体内容如下
效果图：
为了节省时间，就直接贴代码了！
<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>
希望本文所述对大家学习javascript程序设计有所帮助。
【JavaScript动态创建div等元素实例讲解】相关文章：
★ Javascript递归打印Document层次关系实例分析
★ JavaScript中的Math.LOG2E属性使用详解
★ javascript删除元素节点removeChild()用法实例
★ javascript实现dom动态创建省市纵向列表菜单的方法