javascript replaceChild不起作用

Question

我是计算机科学的学生，我们正在练习javascript，练习是： “将项目编号4替换为ID为”numberFour“的新项目和文本”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

＆＃13;

＆＃13;

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]);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

问题是childNodes集合还包括文本节点（空格，换行符，制表符等），因此它们也被计算在内。请改为children：

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