JavaScript 代码未按预期工作

Question

http://codepen.io/abdulahhamzic/pen/xVMXQa

这是我的元素。我想把 userWord 的字母放在五个盒子里。当我使用这段 JavaScript 代码时，为什么每隔一个字母就会出现这种情况？

for (var i = 0; i < 5; i++) {  
        document.getElementsByClassName("letters")[input].childNodes[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
    }    

我似乎想不出解决办法。 :)

Answer 1

childNodes 属性返回元素内的所有节点，其中包括文本节点、实际元素之间的空白。相反，尝试使用 children，它只返回子元素，这正是您想要的。

例如:

for (var i = 0; i < 5; i++) {  
    document.getElementsByClassName("letters")[input].children[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
}

(我在您的 CodePen 中对此进行了测试，它完全符合您的要求。)

更多细节见:

• MDN 文档:childNodes
• MDN 文档:children