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