编程 Javascript

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程序设计有所帮助。

- Author -

ZEAL

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery中文入门指南，翻译加实例，jQuery的起点教程

Jan 13 Javascript

js下获取div中的数据的原理分析

Apr 07 Javascript

js change,propertychange,input事件小议

Dec 20 Javascript

setInterval与clearInterval的使用示例代码

Jan 28 Javascript

zeroclipboard 单个复制按钮和多个复制按钮的实现方法

Jun 14 Javascript

Html5的placeholder属性(IE兼容)实现代码

Aug 30 Javascript

jQuery插件jRumble实现网页元素抖动

Jun 05 Javascript

微信小程序实现给循环列表添加点击样式实例

Apr 26 Javascript

jQuery实现简单的手风琴效果

Apr 17 jQuery

vue路由懒加载的实现方法

Mar 12 Javascript

JavaScript判断浏览器运行环境的详细方法

Jun 30 Javascript

js+cavans实现图片滑块验证

Sep 29 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

Symfony2学习笔记之插件格式分析

2016/03/17 PHP

YII框架批量插入数据的方法

2017/03/18 PHP

php处理静态页面：页面设置缓存时间实例

2017/06/22 PHP

PHP基于ip2long实现IP转换整形

2020/12/11 PHP

javascript中的变量是传值还是传址的？

2010/04/19 Javascript

js中escape对应的C#解码函数 UrlDecode

2012/12/16 Javascript

javascript获取ckeditor编辑器的值(实现代码)

2013/11/18 Javascript

JavaScript控制table某列不显示的方法

2015/03/16 Javascript

javascript+html5实现仿flash滚动播放图片的方法

2015/04/27 Javascript

JavaScript中判断函数、变量是否存在

2015/06/10 Javascript

jQuery实现点击小图显示大图代码分享

2015/08/25 Javascript

微信小程序实现animation动画

2018/01/26 Javascript

node.js使用redis储存session的方法

2018/09/26 Javascript

微信小程序实现保存图片到相册功能

2018/11/30 Javascript

Node.js使用MongoDB的ObjectId作为查询条件的方法

2019/09/10 Javascript

vue组件 keep-alive 和 transition 使用详解

2019/10/11 Javascript

JavaScript setInterval()与setTimeout()计时器

2019/12/27 Javascript

javascript实现画板功能

2020/04/12 Javascript

vue中使用带隐藏文本信息的图片、图片水印的方法

2020/04/24 Javascript

vue 弹出遮罩层样式实例

2020/07/22 Javascript

JS实现手风琴特效

2020/11/08 Javascript

[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典

2018/12/17 DOTA

[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日

2021/03/11 DOTA

Python getopt模块处理命令行选项实例

2014/05/13 Python

Django学习笔记之Class-Based-View

2017/02/15 Python

恢复百度云盘本地误删的文件脚本(简单方法)

2017/10/21 Python

对pandas中Series的map函数详解

2018/07/25 Python

python实现输出一个序列的所有子序列示例

2019/11/18 Python

html5的新玩法——语音搜索

2013/01/03 HTML / CSS

大学生标准推荐信范文

2013/11/25 职场文书

企业门卫岗位职责

2013/12/12 职场文书

十佳护士先进事迹

2014/05/08 职场文书

中药学自荐信

2014/06/15 职场文书

颂军魂爱军营演讲稿

2014/09/13 职场文书

总经理司机岗位职责

2015/04/10 职场文书

厉行节约工作总结

2015/08/12 职场文书