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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
理解Javascript的call、apply
Dec 16 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
Sep 19 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
js实现自动播放匀速轮播图
Feb 06 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数组的一些常见操作汇总
2011/07/17 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
2015/09/22 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
Python简单操作sqlite3的方法示例
2017/03/22 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
JPA面试常见问题
2016/11/14 面试题
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
2014年消防工作实施方案
2014/02/20 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
绵山导游词
2015/02/05 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
房屋维修申请报告
2015/05/18 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python