关于替换的思路

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>

迷失的小麦 2019-12-12

源自：JS DOM操作 9-5 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-12-13 10:22:19

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

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

收起回答

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

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

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