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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
bootstrap table表格使用方法详解
Apr 26 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
在VUE style中使用data中的变量的方法
Jun 19 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php 解决扫描二维码下载跳转问题
2017/01/13 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
javascript编程起步(第四课)
2007/02/27 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
浅谈django中的认证与登录
2016/10/31 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Nebula美国官网:便携式投影仪
2019/03/15 全球购物
信息技术专业个人自我评价
2013/12/11 职场文书
电工技术比武方案
2014/05/11 职场文书
学生偷窃检讨书
2014/09/25 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书