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标签在页面中的位置探讨
Apr 11 Javascript
jquery插件validate验证的小例子
May 08 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
Dec 11 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
vue3使用vue-router的完整步骤记录
Jun 20 Vue.js
javascript的var与let,const之间的区别详解
Feb 18 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
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
python实现简单中文词频统计示例
2017/11/08 Python
Python Socket编程之多线程聊天室
2018/07/28 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python3实现简单飞机大战
2020/11/29 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
Scotch Porter官方网站:男士美容产品
2020/08/31 全球购物
优秀女职工事迹材料
2014/02/06 职场文书
眼镜促销方案
2014/03/15 职场文书
采购求职信
2014/03/17 职场文书
四下基层实施方案
2014/03/28 职场文书
拉歌口号大全
2014/06/13 职场文书
建筑节能汇报材料
2014/08/22 职场文书
护士节活动总结
2014/08/29 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书