javascript replaceChild不起作用

Question

我是一名计算机科学的学生，我们正在javascript上做练习--练习是：“用id”numberFour和文本“虐待”替换第4项。在我做这个练习之前是这样的：

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上都能工作。

Answer 2

问题是childNodes集合还包括文本节点(空格、换行、制表符等)，因此它们也被计算在内。试一试children：

lijst.replaceChild(vier, lijst.children[3]);