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 相关文章推荐
JavaScript编程开发中的五个实用小技巧
Jul 22 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
js中的this关键字详解
Sep 25 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
原生js实现商品筛选功能
Oct 28 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
php email邮箱正则
2008/10/08 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
php自定文件保存session的方法
2014/12/10 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JavaScript基本对象
2007/01/11 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
如何在vue 中使用柱状图 并自修改配置
2021/01/21 Vue.js
python实现的重启关机程序实例
2014/08/21 Python
python实现同时给多个变量赋值的方法
2015/04/30 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
美国最大的存储市场:SpareFoot
2018/07/23 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
初一地理教学反思
2014/01/16 职场文书
开学寄语大全
2014/04/08 职场文书
保险公司开门红口号
2014/06/21 职场文书
班级团队活动方案
2014/08/14 职场文书
普通党员对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动组织生活会发言材料
2014/10/17 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
大学新生入学感想
2015/08/07 职场文书
Python合并多张图片成PDF
2021/06/09 Python