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

2019-11-20 10:50:56

字体：大中小

来源：转载

供稿：网友

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

上一篇：基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载

下一篇：谈谈JavaScript类型系统之Math