javascript replaceChild不起作用

Question

我是计算机科学的学生,我们正在练习javascript,练习是:"用id为"numberFour"的新项目替换第4项,并使用文本"Mistreatment".这就是我做这个练习之前的样子:

1. 第一:寻找伴侣
2. 第二名:无聊
3. 第三:缺乏服从
4. 第四:虐待
5. 五号:寻求伴侣

然后我写了这个js代码来完成任务:

var vier = document.createElement("li");
vier.innerHTML = "Number four: Mistreatment";
vier.setAttribute("id", "numberFour");
var lijst = document.querySelector("#fiveReasons");
lijst.replaceChild(vier, lijst.childNodes[3]);

然后它看起来像这样:

1. 第一:寻找伴侣
2. 第二名:无聊
3. 第四:虐待
4. 第四:虐待
5. 五号:寻求伴侣

所以我把我的代码更改为:

var vier = document.createElement("li");
vier.innerHTML = "Number four: Mistreatment";
vier.setAttribute("id", "numberFour");
var lijst = document.querySelector("#fiveReasons");
lijst.replaceChild(vier, lijst.childNodes[4]);

然后我得到了这个:

1. 第一:寻找伴侣
2. 第二名:无聊
3. 第三:缺乏服从
4. 第四:虐待
5. 第四:虐待
6. 五号:寻求伴侣

我的老师不明白为什么它不起作用,我也不能,有人可以帮助我吗？

Answer 1

childNodes包括li元素之间空白的文本节点(如果有的话,还有注释节点等).children如果您只想要子元素,请使用:

var vier = document.createElement("li");
vier.innerHTML = "Number four: Mistreatment - updated";
vier.setAttribute("id", "numberFour");
var lijst = document.querySelector("#fiveReasons");
lijst.replaceChild(vier, lijst.children[3]);

<ol id="fiveReasons">
    <li>Number one: Looking For a Mate</li>
    <li>Number two: Boredom</li>
    <li>Number three: Lack of Obedience</li>
    <li>Number four: Mistreatment</li>
    <li>Number five: Seeking Companionship</li>
</ol>

children 适用于所有现代浏览器和IE8.