老师我创建了一个文档片段,当我把li放进这个文档片段里为啥执行不了

老师我创建了一个文档片段,当我把li放进这个文档片段里为啥执行不了

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<script type="text/javascript">

//创建多个节点的第一种方法

/*var ul=document.createElement("ul")

var li1=document.createElement("li")

var li2=document.createElement("li")

var li3=document.createElement("li")

var text1=document.createTextNode("第一个li")

var text2=document.createTextNode("第二个li")

var text3=document.createTextNode("第三个li")

var com=document.createComment("创建节点")

document.body.appendChild(ul)

document.body.insertBefore(com,ul)

li1.className="li"

li2.className="li"

li3.className="li"

  ul.appendChild(li1)

ul.appendChild(li2)

ul.appendChild(li3)

li1.appendChild(text1)

li2.appendChild(text2)

li3.appendChild(text3)

*/

//创建节点的第二种方法

var ul=document.createElement("ul")

var com=document.createComment("创建节点")

var bt=document.createDocumentFragment()

 

for(i=0;i<3;i++){

var li=document.createElement("li")

var text=document.createTextNode("第"+(i+1)+"个li")

ul.appendChild(li)

li.className="li"

//bt.appendChild(li)

//bt.appendChild(text)

li.appendChild(text)


}

document.body.appendChild(ul)

document.body.insertBefore(com,ul)

</script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2019-12-06 17:51:20

同学你好, 对于你的疑问解答如下:

  1. 文字内容是添加到li标签中的,同学注释的代码是添加到文档片段中了。

  2. 最后没有将文档片段添加到ul中,导致无法显示。

    创建文档片段就是为减少DOM的操作, 因为先使用循环将li先装填到fragment代码片段中,最后再将代码片段装填到ul中,页面结构只会改变一次。所以需要在循环外将文档片段添加到ul中

示例:

http://img1.sycdn.imooc.com//climg/5dea24850981403f08420522.jpg

效果图:

http://img1.sycdn.imooc.com//climg/5dea249109c2dc2710670298.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师