关于替换的思路

关于替换的思路

linew是li的集合,为什么能把整个ul换掉(并没有创建ul)?而不能用整个新li换整个旧li?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>节点练习</title>
</head>
<body>
    <div id="wrap">
      <ul id="list">
        <li>第一个li</li>
        <li>第二个li</li>
        <li>第三个li</li>
      </ul>
    </div> 
    <script>
var div=document.getElementById("wrap");
var ul=document.getElementById("list");
var linew=document.createDocumentFragment();
for(var i=0;i<4;i++){
var li_new=document.createElement("li");
var neirong=document.createTextNode("新增li"+(i+1));
li_new.appendChild(neirong);
linew.appendChild(li_new);
}
div.replaceChild(linew,ul);
    </script>
</body>
</html>


正在回答

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

2回答

同学你好, 从效果上看可以不用创建ul,但是从代码的规范上考虑,需要创建一个ul包裹所有的li元素,示例:

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

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

好帮手慕慕子 2019-12-12 17:29:10

同学你好,因为语法规定, replace方法的作用就是直接替换整个节点, 所以会直接换掉原来的ul节点。

replace方法的第一个参数表示:你要执行替换的节点,第二个参数是被替换的节点。然后,我们在来分析你的代码, linew是li的集合, ul是原来的节点,div.replaceChild(linew,ul);这句代码的意思是使用linew节点,替换ul节点, 也就是说ul节点将会从页面中移出,如下:

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

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

  • 提问者 迷失的小麦 #1
    那是否需要在li外面创建一个ul包裹起来,替换之后
    2019-12-13 10:04:54
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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