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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
js切换光标示例代码
Oct 10 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
React组件的三种写法总结
Jan 12 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
vue中使用腾讯云Im的示例
Oct 23 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php中通过curl smtp发送邮件
2012/06/05 PHP
PHP生成随机密码类分享
2014/06/25 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
JavaScript中的比较操作符&gt;、=、
2014/12/31 Javascript
js实现背景图片感应鼠标变化的方法
2015/02/28 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
python实现随机加减法生成器
2020/02/24 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
Python实现GIF图倒放
2020/07/16 Python
怎样声明接口
2014/09/19 面试题
杠杆的科学教学反思
2014/01/10 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
食品安全承诺书范文
2014/08/29 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书