Javascript 孩子不工作吗？

好的，我一直在阅读JS，并决定创建一个测验应用程序来练习我的新技能。因此，基本上，它是一个奇特的应用程序，一次询问一个州首府，并立即给出正确答案。这是HTML：

<header>
    <h1>The All-Star State Capitals Quiz.</h1>
    <h3>How well do you know your state capitals?</h3>
</header>
<section id = "main">
<div id = "playArea">
    <div id = "questionArea">
    </div>
    <div id = "answerArea">
        <input  name = "choices" id = "answerA" type = "radio">
        <br>
        <input name = "choices" id = "answerB" type = "radio">
        <br>
        <input name = "choices" id = "answerC" type = "radio">
        <br>
        <input name = "choices" id = "answerD" type = "radio">
    </div>
    <!--button-->
    <div>
        <input type = "button" id = "nextQuestion" value = "Next Question">
    </div>
</div>
    <div id = "quizState">
        <p id = "result"></p>
        <p id = "correctAnswer"></p>
        <p id = "scoreSoFar"></p>
    </div>
</section>

全明星州首府问答比赛。
你对州首府了解多少？

因此，我的想法是做一个单独的JS MVC ish操作来动态更新questionArea和answerArea。questionArea很容易使用“.innerHTML”，但answerArea让我头疼，因为我无法让它使用appendChild（我在Mac上使用chrome）更新选项。这是JS：

var view = 
    {
        displayQuestion:function(quiztion)
        {
            var questionArea = document.getElementById("questionArea");
            questionArea.innerHTML = quiztion;
        },
        displayAnswers: function(answers)
        {

            var answerArea = document.getElementById("answerArea");
            var inputs = document.getElementsByName("choices");
            for(var i = 0;i<inputs.length;i++)
            {
                var answer = answers[i];
                var lblTxt = document.createTextNode(answer);
                var lbl = document.createElement("label").appendChild(lblTxt);
                inputs[i].appendChild(lbl);
            }
        }

    }

view.displayQuestion("1.What is the capital of Massachusetts?");
view.displayAnswers(["A.Boston","B.New Haven","C.Albany","D.Hartford"]);

var视图=
{
显示问题：功能（提问）
{
var questionArea=document.getElementById（“questionArea”）；
questionArea.innerHTML=quiztion；
},
显示答案：功能（答案）
{
var answerArea=document.getElementById（“answerArea”）；
var inputs=document.getElementsByName（“选项”）；
对于（var i=0；i，您可以通过对javascript代码进行几个修复来解决此问题。正如注释中所建议的，您可以使用insertBefore（），但请查看该方法的定义：

insertBefore（）方法将节点作为子节点插入到
您指定的现有子项

因此，在您的特定情况下，您需要插入新的子项-标签-作为应答区域的节点子项，并且正好在输入[i]下一个同级元素之前（下一个同级元素，因为否则收音机将位于标签之后而不是之前）

var视图=
{
显示问题：功能（提问）
{
var questionArea=document.getElementById（“questionArea”）；
questionArea.innerHTML=quiztion；
},
显示答案：功能（答案）
{
var answerArea=document.getElementById（“answerArea”）；
var inputs=document.getElementsByName（“选项”）；
for（var i=0；iAn
不能有任何子项。也许您想设置
值，而不是
子项，他试图将答案放在单选按钮后的标签中。您应该使用
insertBefore（）
在DOM的同一级别插入元素，而不是
appendChild（）
。是的，每当我调用views对象时，我都希望在输入之间插入一个带有答案的标签。现在是否正确？输入[I].insertBefore（lbl）还是我的逻辑有缺陷？
var view = 
{
    displayQuestion:function(quiztion)
    {
        var questionArea = document.getElementById("questionArea");
        questionArea.innerHTML = quiztion;
    },
    displayAnswers: function(answers)
    {

        var answerArea = document.getElementById("answerArea");
        var inputs = document.getElementsByName("choices");
        for(var i = 0;i<inputs.length;i++)
        {
            var answer = answers[i];
            var lblTxt = document.createTextNode(answer);
            var lbl = document.createElement("label").appendChild(lblTxt);
            answerArea.insertBefore(lbl, inputs[i].nextSibling);
        }
    }

}

view.displayQuestion("1.What is the capital of Massachusetts?");
view.displayAnswers(["A.Boston","B.New Haven","C.Albany","D.Hartford"]);