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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
Sep 16 Javascript
js arguments对象应用介绍
Nov 28 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 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 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
Yii框架登录流程分析
2014/12/03 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
动态加载js的几种方法
2006/10/23 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
python根据路径导入模块的方法
2014/09/30 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
html5 自定义播放器核心代码
2013/12/20 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
青年教师培训方案
2014/02/06 职场文书
干部下基层实施方案
2014/03/14 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
TV动画《间谍过家家》公开PV
2022/03/20 日漫