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 相关文章推荐
js 鼠标点击事件及其它捕获
Jun 04 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
基于jQuery封装的分页组件
Jun 26 jQuery
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
php explode函数实例代码
2012/02/27 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
yii2.0整合阿里云oss的示例代码
2017/09/19 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
2019/11/15 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python中执行shell命令的几个方法小结
2014/09/18 Python
python发送告警邮件脚本
2018/09/17 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python中如何设置代码自动提示
2020/07/15 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
优秀体育委员自荐书
2014/01/31 职场文书
农林环境专业求职信
2014/03/13 职场文书
低碳环保倡议书
2014/04/14 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
2015年秋季运动会加油稿
2015/07/22 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技