编程 Javascript

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程序设计有所帮助。

- Author -

ZEAL

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

初学Jquery插件制作在SageCRM的查询屏幕隐藏部分行的功能

Dec 26 Javascript

javascript针对DOM的应用分析（二）

Apr 15 Javascript

第四章之BootStrap表单与图片

Apr 25 Javascript

JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

Mar 03 Javascript

JS使用正则表达式验证身份证号码

Jun 23 Javascript

使用vue的v-for生成table并给table加上序号的实例代码

Oct 27 Javascript

初探js和简单隐藏效果的实例

Nov 23 Javascript

使用Angular CLI生成路由的方法

Mar 24 Javascript

vue.js实现的绑定class操作示例

Jul 06 Javascript

vue 表单验证按钮事件交由父组件触发的方法

Dec 17 Javascript

微信小程序实现获取用户信息并存入数据库操作示例

May 07 Javascript

layer提示框添加多个按钮选择的实例

Sep 12 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