JavaScript动态创建div等元素实例讲解

时间：2021-05-26

本文实例讲解了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章