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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
js+FSO遍历文件夹下文件并显示
Mar 07 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
Dec 05 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
Vue实现下拉加载更多
May 09 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
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
长波知识介绍
2021/03/01 无线电
PHP解析目录路径的3个函数总结
2014/11/18 PHP
PHP数组去重比较快的实现方式
2016/01/19 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python中无限循环需要什么条件
2020/05/27 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
技校毕业生自荐信范文
2014/03/07 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
运动会稿件100字
2014/09/24 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
鲁冰花观后感
2015/06/10 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
担保书范文
2019/07/09 职场文书
Golang使用Panic与Recover进行错误捕获
2022/03/22 Golang