Javascript动态创建div的方法


Posted in Javascript onFebruary 09, 2015

本文实例讲述了Javascript动态创建div的方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>原生javascript创建div</title>

<script>

window.onload=function () {

        var Odiv=document.createElement("div");             //创建一个div

        var Ospan=document.createElement("span");          //创建一个span

        Odiv.style.cssText="width:200px;height:200px;background:#636363;

        text-align:center;line-height:220px";    //创建div的css样式

        //Odiv.id="box";                            //创建div的id为box

        //Odiv.className="Box";                    //div的class为Box

        Odiv.appendChild(Ospan);            //在div内创建一个span

        document.body.appendChild(Odiv);        //在body内创建一个div 

    }

</script>

</head>

<body>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
模仿百度三维地图的js数据分享
May 12 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
Mar 25 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
jQuery中内容过滤器简单用法示例
Mar 31 jQuery
浅谈React 服务器端渲染的使用
May 08 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
angularJS 中$attrs方法使用指南
Feb 09 #Javascript
JavaScript实现获取dom中class的方法
Feb 09 #Javascript
angularJS 中input示例分享
Feb 09 #Javascript
angularJS提交表单(form)
Feb 09 #Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 #Javascript
js选项卡的实现方法
Feb 09 #Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 #Javascript
You might like
PHP4在Windows2000下的安装
2006/10/09 PHP
php Try Catch异常测试
2009/03/01 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
js 颜色选择插件
2017/01/23 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
铭万公司.net面试题笔试题
2014/07/20 面试题
四年级科学教学反思
2014/02/10 职场文书
协议书模板
2014/04/23 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
大型演出策划方案
2014/05/28 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
临时租车协议范本
2014/09/23 职场文书
个人总结与自我评价2015
2015/03/11 职场文书