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拆分字符串时产生空字符的解决方案
Sep 26 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
js 实现 list转换成tree的方法示例(数组到树)
Aug 18 Javascript
JS运算符优先级与表达式示例详解
Sep 04 Javascript
ES6 十大特性简介
Dec 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
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php文件包含的几种方式总结
2019/09/19 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
PHP 实现缩略图
2021/03/09 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
jquery动态添加option示例
2013/12/30 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
Express的路由详解
2015/12/10 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
vue插件draggable实现拖拽移动图片顺序
2018/12/01 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
python+logging+yaml实现日志分割
2019/07/22 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
亮剑精神演讲稿
2014/05/23 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2016春节家属慰问信
2015/03/25 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
k-means & DBSCAN 总结
2021/04/27 Python