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>
时间： 2024-09-29 22:51:48

Javascript动态创建div的相关文章

前端学习代码实例-JavaScript动态创建div并写入文本

介绍一下如何利用JavaScript动态创建div元素,然后在其中写入文本. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>web前端开发学习扣qun:731771211

2016.3.11_JS动态创建div和span【笔记】

1.动态创建div. <html> <body>   <a href="javascript:click();">click here</a>  </body></html><script language=javascript>        var divId=1;         function click()        {            var obj=document.creat

JavaScript动态实现div窗口弹出&amp;消失功能

先积累一个JavaScript动态实现div窗口弹出&消失功能 首先是index.jsp代码 <html> <head> <link rel="stylesheet" href="css/DivStyle.css" media="screen"> <script type="text/javascript" src="scripts/div.js">&

用javascript动态创建并提交表单form，表格table

<script> //helper function to create the formfunction getNewSubmitForm(){ var submitForm = document.createElement("FORM"); document.body.appendChild(submitForm); submitForm.method = "POST"; return submitForm;} //helper function t

JavaScript 动态创建标记与Ajax

JavaScript 动态创建标记与Ajax 一:简介 前面都是针对已经存在的标记进行操作.JavaScript同样可以动态创建标记并且与现有标记组合生成新的Document.同时简单的介绍了Ajax. 二:动态创建标记与组合 相关方法: /** * Some old-shcool method */ document.write("str"); var node = document.getElementById('id'); var htmlValue = node.innerHT

javascript动态创建表格：新增、删除行和列

转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1.inserRow()和insertCell()函数 insertRow()函数可以带参数,形式如下: insertRow(index):index从0开始 这个函数将新行添加

JavaScript动态创建HTML元素

用ajax时会用到js的动态创建HTML元素,这里简单的讲一下方法: 先分析一下HTML元素 <span style="font-size:18px;"><body></span> <font color="red" size="12">红色<p>换行</p></font> </body> 包括HTML元素的名称.属性.和内容 <名称 属性1=&

动态创建 div table

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery.min.js&q

Javascript动态创建 style 节点

有很多提供动态创建 style 节点的方法,但是大多数都仅限于外部的 css 文件.如何能使用程序生成的字符串动态创建 style 节点,我搞了2个小时. 静态外部 css 文件语法: @import url(style.css); 动态外部 css 文件加载的方法有如下: 第一种: var style = document.createElement(’link’);style.href = ’style.css’;style.rel = ’stylesheet’;style.type = ‘