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


Posted in Javascript onJanuary 06, 2016

本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下

效果图:

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 相关文章推荐
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
微信小程序 scroll-view实现锚点滑动的示例
Dec 06 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
谈谈JavaScript类型系统之Math
Jan 06 #Javascript
莱鸟介绍javascript onclick事件
Jan 06 #Javascript
莱鸟介绍window.print()方法
Jan 06 #Javascript
JavaScript实现点击按钮直接打印
Jan 06 #Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 #Javascript
JavaScript引用类型和基本类型详解
Jan 06 #Javascript
js模仿java的Map集合详解
Jan 06 #Javascript
You might like
PHP数据库开发知多少
2006/10/09 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
jQuery.each()用法分享
2012/07/31 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
javascript禁止超链接跳转的方法
2016/02/02 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
Canvas实现微信红包照片效果
2018/08/21 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python中的编码知识整理汇总
2016/01/26 Python
django2 快速安装指南分享
2018/01/05 Python
python获取文件真实链接的方法,针对于302返回码
2018/05/14 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
pymysql 开启调试模式的实现
2019/09/24 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
Pygame的程序开始示例代码
2020/05/07 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
GC是什么?为什么要有GC?
2013/12/08 面试题
教育专业个人求职信
2013/12/02 职场文书
搞笑创意广告语
2014/03/17 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
Go timer如何调度
2021/06/09 Golang
Tomcat弱口令复现及利用
2022/05/06 Servers