html5 怎么动态创建div并赋值

html-css036

html5 怎么动态创建div并赋值,第1张

用js 参考一下这个代码

<script>

window.onload=function () {

        var Odiv=document.createElement("div")             //创建一个div

        var Ospan=document.createElement("span")          //创建一个span

        Odiv.style.cssText="width:200pxheight:200pxbackground:#636363

        text-align:centerline-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>

示例如下：

=====

<!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/htmlcharset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

var UI = {

$:function(_id){return document.getElementById(_id)},

test:function(){

var btn_input = document.createElement("input")

btn_input.type="text"

btn_input.value="自动赋值"+Math.random()

this.$("test").appendChild(btn_input)

}

}

</script>

</head>

<body>

<input type="button" value="添加文本域" onclick="UI.test()"/>

<div id="test"></div>

</body>

</html>