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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
解析JavaScript中的标签语句
Jun 19 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
深入探究node之Transform
2017/07/20 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
node使用request请求的方法
2019/12/20 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python中isnumeric()方法的使用简介
2015/05/19 Python
python之pandas用法大全
2018/03/13 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
Django 1.10以上版本 url 配置注意事项详解
2019/08/05 Python
python爬虫用mongodb的理由
2020/07/28 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
人力资源管理专业学生自我评价
2013/11/20 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
工作睡觉检讨书
2014/02/25 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
小学语文教学随笔
2015/08/14 职场文书
node快速搭建后台的实现步骤
2022/02/18 NodeJs