javascript中如何在body中动态添加div元素?

javascript中如何在body中动态添加div元素?,第1张

详细的解题步骤如下:

<div id="parent"></div>

function addElementDiv(obj) {

var parent = document.getElementById(obj)

//添加 div

var div = document.createElement("div")

//设置 div 属性,如 id

div.setAttribute("id", "newDiv")

div.innerHTML = "js 动态添加div"

parent.appendChild(div)

}

调用:addElementDiv("parent")

什么是DIV元素:

1、DIV标签,称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象,或其他的放在 DIV 中,它可称作为"DIV block",或"DIV element"或"CSS-layer",或干脆叫"layer"。而中文我们把它称作"层次"。

2、DIV元素,是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

<body>

<button id="btn">增加</button>

<div>第1个DIV</div>

<script>

  var btn = document.getElementById("btn")

  var divs = document.getElementsByTagName("div") //DIV数组

  var index = divs.length-1 //得到最后一个DIV索引

  btn.onclick=function(){

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

    var txt = document.createTextNode("第"+(divs.length+1)+"个DIV") //创建DIV的文字内容

    divi.appendChild(txt) //将文字内容添加到新创建的DIV

    divs[index].appendChild(divi) //将新创建的DIV添加到原来最后一个DIV的后面

  }

</script>

</body>

看下效果

document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。\x0d\x0a其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。\x0d\x0a1、添加DIV \x0d\x0afunction addDiv(w,h){ \x0d\x0a//如果原来有“divCell”这个图层,先删除这个图层\x0d\x0adeleteDiv()\x0d\x0a//创建一个div \x0d\x0avar newdiv = document.createElement("divCell") \x0d\x0a//添加到页面 \x0d\x0adocument.body.appendChild(newdiv) \x0d\x0a//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看 \x0d\x0anewdiv.style.position="absolute" \x0d\x0a//通过样式指定x坐标(随机数0~450) \x0d\x0anewdiv.style.top= Math.round(Math.random()*450) \x0d\x0a//通过样式指定y坐标(随机数0~700) \x0d\x0anewdiv.style.left= Math.round(Math.random()*700) \x0d\x0a//通过样式指定宽度 \x0d\x0anewdiv.style.width=w \x0d\x0a//通过样式指定高度 \x0d\x0anewdiv.style.height=h \x0d\x0a//通过样式指定背景颜色,,若是背景图片 例为 newdiv.style.backgroundImage="url(img/3.jpg)" \x0d\x0anewdiv.style.backgroundColor="#ffffcc" \x0d\x0a//添加div的内容 \x0d\x0a//newdiv.innerHTML=i++\x0d\x0a//设置样式透明\x0d\x0anewdiv.style.filter = "alpha(opacity=50)"\x0d\x0a//设置ID\x0d\x0anewdiv.id = "divCell" \x0d\x0a }\x0d\x0a2、删除DIV \x0d\x0a function deleteDiv()\x0d\x0a {\x0d\x0avar my = document.getElementById("divCell")\x0d\x0aif (my != null)\x0d\x0amy.parentNode.removeChild(my)\x0d\x0a }


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11351203.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-15
下一篇 2023-05-15

发表评论

登录后才能评论

评论列表(0条)

保存