js动态创建div等元素实例

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();//创建单选按钮

1

2

3

php动态增加div,JavaScript动态创建div等元素实例相关推荐

  1. html下拉框动态增加成员,JavaScript实现左右下拉框动态增删示例

    选中下拉框中的选项实现左移右移 效果: 1. Html部分代码 左1 左2 左3 左4 左5 左6 左7 左8 左9 左10 右1 右2 右3 右4 右5 右6 右7 2. JavaScript脚本代 ...

  2. aspx 追加html标签,ASP.NET动态增加HTML元素的方法实例小结

    本文实例讲述了ASP.NET动态增加HTML元素的方法.分享给大家供大家参考,具体如下: 在使用asp.net进行web开发的时候页面中的 中的信息可以通过asp.net的cs文件动态指定. 1.动态 ...

  3. html自动创建div,Javascript实现动态创建DIV步骤

    本文向大家描述一下如何使用Javascript动态创建DIV,首先看一下原来的CSS样式,然后动态创建DIV, 把DIV元素增加到HTML里面,相信本文介绍你会学到很多. Javascript动态创建 ...

  4. js动态增加,删除td,tr,table,div

    js实现的动态添加,删除table内容: 截图如下: 1. 2. 源代码: main.css body {background-image: url(../images/qiantai/bg.png) ...

  5. js动态创建div等元素实例

    为了节省时间,就直接贴代码了!希望大家多多的关注我! <html><head><title>js动态创建div等元素实例</title><styl ...

  6. 渲染元素中动态创建div来渲染html dom组件,是需要将element元素对象return返回的(也支持直接返回ht的widget、ui等视图view组件),刷新重新加载图纸

    如下面所示,动态创建的div,设置了id后,浏览器也能看到,但是刷新(并非刷新浏览器页面)重新加载图纸,div会被自动移除及重新创建,合情合理,因为是随着渲染元素机制走的. 所以在创建div之前判断浏 ...

  7. 动态给div追加html代码,javascript – 动态添加/删除div到html

    删除: var div = document.getElementById('xyz'); if (div) { div.parentNode.removeChild(div); } 或者如果您不控制 ...

  8. javascript动态创建可拖动、最大化、最小化的层

    javascript动态创建可拖动.最大化.最小化的层 2010-02-06 13:19 用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等.之前用隐藏层的方 ...

  9. ajax动态加载div,JQuery/AJAX:使用动态内容加载外部DIV使用动态内容

    我需要创建一个页面,使用Jquery和AJAX从外部页面加载div.JQuery/AJAX:使用动态内容加载外部DIV使用动态内容 我遇到了一些很好的教程,但它们都是基于静态内容的,我的链接和内容是由 ...

最新文章

  1. linux中spawn远程执行,linux 远程登录执行命令
  2. [导入]C#面向对象设计模式纵横谈(10):Decorator 装饰模式(结构型模式).zip(9.84 MB)...
  3. newman执行测试_postman+newman+Jenkins之API全自动化测试(MAC)
  4. java 面试题分析
  5. 计算机科学与技术a类学科,清华大学a类学科有哪些?附清华a类学科名单
  6. java名字自动生成_Java名字生成器
  7. 十字链表法和邻接多重表法
  8. python爬虫爬取英文考研词汇
  9. c语言答辩ppt案例,c语言ppt例子课题答辩ppt成品中南民族大学.ppt
  10. 设置定时器,持续调用接口
  11. 一直以来很喜欢的NewAge纯音乐
  12. Window Server 2012许可证过期解决方法
  13. 【十大思想实验之一】电车难题
  14. 企业微信可以自动上班打卡吗?
  15. Electron MAC 打包签名生成
  16. 简述模板引擎、常见模板引擎以及Thymeleaf常用指令
  17. 什么是容器编排及容器编排是怎么工作的?
  18. Sophos防火墙v18版本访问内部服务器或者电脑SNAT地址转换的问题解决办法
  19. Content(内容)
  20. Rufus 格式化和创建可引导U盘的工具

热门文章

  1. HDU1087 Super Jumping! Jumping! Jumping!【最长上升子序列+DP】
  2. HDU1229 还是A+B【水题】
  3. math、numpy、pandas NaN 判断
  4. 深度学习基础(十一)—— 稀疏自编码器(二)
  5. 图像(帧)分块机制(patch mechanism)
  6. matplotlib 可视化细节,丰富的可选参数
  7. python软件下载中文版-PyCharm中文版
  8. python使用-Python3 错误和异常
  9. 学python心得体会800字-python 学习心得
  10. python和java学哪个好-Python和Java学哪个更好?