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 面向对象编程基础 多态
Aug 21 Javascript
javascript 命名规则 变量命名规则
Feb 25 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
Vue前端项目部署IIS的实现
Jan 06 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JavaScript中的this妙用实例分析
May 09 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
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python如何对齐字符串
2020/07/30 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
简历上的自我评价
2014/02/03 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
鉴定评语大全
2014/05/05 职场文书
理财计划书
2014/08/14 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
节水宣传标语口号
2015/12/26 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书