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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
angular 组件通信的几种实现方式
Jul 13 Javascript
vue 实现用户登录方式的切换功能
Apr 14 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
javascript中的new使用
2010/03/20 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
python调用支付宝支付接口流程
2019/08/15 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
财务管理专业推荐信
2013/11/19 职场文书
省级四好少年事迹材料
2014/01/25 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
委托证明书
2014/09/17 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
学校食堂标语
2014/10/06 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS