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获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
js中延迟加载和预加载的具体使用
Jan 14 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 定界符 使用技巧
2009/06/14 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
javascript中attachEvent用法实例分析
2015/05/14 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
python破解zip加密文件的方法
2018/05/31 Python
详解python Todo清单实战
2018/11/01 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
简单了解python的break、continue、pass
2019/07/08 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
本科毕业自我鉴定
2014/03/20 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
英文商务邀请函范文
2015/01/31 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
培训讲师开场白
2015/06/01 职场文书
对学校的意见和建议
2015/06/04 职场文书
运动员加油词
2015/07/18 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
演讲稿之开卷有益
2019/08/07 职场文书