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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
深入探讨前端框架react
Dec 09 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
Sep 27 Javascript
JS排序算法之希尔排序与快速排序实现方法
Dec 12 Javascript
vue计算属性和监听器实例解析
May 10 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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
2017/03/24 jQuery
浅谈angularjs中响应回车事件
2017/04/24 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
Python3 把一个列表按指定数目分成多个列表的方式
2019/12/25 Python
css3 边框、背景、文本效果的实现代码
2018/03/21 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
同步和异步有何异同,在什么情况下分别使用他们
2013/04/09 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
nginx lua 操作 mysql
2022/05/15 Servers