怎么用Js添加div？

JavaScript024

怎么用Js添加div？,第1张

<style type="text/css">

.box{position:absolutewidth:60pxheight:200pxbackground-color:#0ff /*background: url(../images/dang2.jpg) no-repeat*/ }

</style>

<body>

<script type="text/javascript">

var newDiv=document.createElement("div")

newDiv.className="box"

newDiv.id="box1"

newDiv.style.bottom="0px"

newDiv.style.left="0px"

document.getElementsByTagName("body").item(0).appendChild(newDiv)

var newDiv=document.createElement("div")

newDiv.className="box"

newDiv.id="box2"

newDiv.style.bottom="0px"

newDiv.style.right="0px"

document.getElementsByTagName("body").item(0).appendChild(newDiv)

var id=function(o){return document.getElementById(o)}

var scroll=function (o){

var space=id(o).offsetTop

id(o).style.top=space+'px'

void function(){

var goTo = 0

var roll=setInterval(function(){

var height =document.documentElement.scrollTop+document.body.scrollTop+space

var top = parseInt(id(o).style.top)

if(height!= top){

goTo = height-parseInt((height - top)*0.9)

id(o).style.top=goTo+'px'

}

//else{if(roll) clearInterval(roll)}

},50)

}()

}

scroll('box1')

scroll('box2')

</script>

</body>

思路：先获取div对象，然后用innerHTML属性设置内容。当div用id属性标识时，可以直接用document.getElementById()获取；当div是用其他属性（如name，class）标识，就需要使用document.getElementsByTagName()获取对象，然后循环判断属性进行筛选。

下面实例演示根据div的class设置div的内容：

1、HTML结构

<div class="test"></div>

<input type="text" id="test"/><input type='button' value='发送' onclick="fun()"/>

2、javascript代码

function fun(){

var str = document.getElementById("test").value

var divs = document.getElementsByTagName("div")

for(i=0i<divs.lengthi++){

if(divs[i].className == "test"){

divs[i].innerHTML += "<br>" +str

}

}

}

3、效果演示