怎样在一个空div中动态插入多个新div元素

怎样在一个空div中动态插入多个新div元素,第1张

var creatediv= function(){

    var parentdiv=$('

')        //创建一个父div,如果已经有了就获取

    parentdiv.attr('id','parent')        //给父div设置id

    parentdiv.addclass('parentdiv')    //添加css样式    var childdiv=$('

')        //创建一个子div

    childdiv.attr('id','child')            //给子div设置id

    childdiv.addclass('childdiv')    //添加css样式

    childdiv.appendto(parentdiv)        //将子div添加到父div中    parentdiv.appendto('parentdiv')            //将父div添加到父级中去

}

当然可以了,几乎所有的DOM对象都有innerHTML属性,它是一个字符串,用来设置或获取位于对象起始和结束标签内的HTML。要用innerHTML给元素添加子元素只要将包含有子元素的html赋值给元素的innerHTML就好了。如:

<!—需要给div元素添加子元素

-->

<body>

<p>Hello

World</p>

<div

id="myDiv"></div>

</body>

//将<p>元素添加到div中。

document.getElementById(“myDiv”).innerHTML

=

“<p>我是新添加的子元素<p>”

上面的示例较简单,赋值给innerHTML的值可以是一个表单,可以是更长更复杂的html。

虽然innerHTML属性添加子元素很方便,但容易出错,很多教程

网上(如秒秒学)都不使用。更常用添加节点的方式,来添加子元素。这样更加准确和具体的描述了DOM的变化。如上述innerHTML的语句可以替换成:

var

myParaElement

=

document.createElement(“p”)

//创建p元素

var

myText

=

document.createTextNode(“我是文本节点!”)

//创建文本节点

myParaElement.appendChild(myText)

//将文本节点做为p元素的子节

document.getElementById(“myDiv”).appendChild(myParaElement)

//再将p元素做为子节点放在div元素下。

1、首先在插入前要判断div中有几个div;

2、js代码:

<body>

<div id="div">

<span><div></div></span>

</div>

<button type="button" onclick="demo()">insert</button>

<script type="text/javascript">

function demo() {

    if($('#div').children('div').length==0){

        alert('div中没有子div!')

    }

}

</script>

</body>

3、如果$('#div').children('div').length==0  那么再插入div的话,那就是第一个了,这样写是筛选的div下子div,不包含子元素下的子div;


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

原文地址:https://54852.com/bake/11408130.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存