Add a new list item to a item when using a for loop with JavaScript

Question

I'm creating a quiz whilst I learn JavaScript. I have created an array of objects that act as the question, potential answers and the correct answer. I am stuck on trying to go through each of the potential answers, using a for loop, and adding these an existing I have created. I am creating the item with the following code:

var questChoices = function() {
    for(var i = 0; i < allQuestions[currQues].choices.length; i++){
        var choiceHTML = '<li><input type="radio" name="choices" id="choice' + [i] + 1 +'"';
        choiceHTML += ' value="' + allQuestions[currQues].choices[i].toLowerCase() + '"' + ' />';
        choiceHTML += '<label for="choice' + [i] + 1 +'"' + '>';
        choiceHTML += allQuestions[currQues].choices[i] + '</label>';
        choiceHTML += '</li>';
        choicesHTML.appendChild(choiceHTML);
    }
} 

questChoices();

When the page loads and calls this function I get the following error in the console:

Uncaught TypeError: Failed to execute appendChild' on 'Node': parameter 1 is not of type 'Node'.

Answer 1

You're using a plain string of html, which can be set to choicesHTML.innerHTML:

choicesHTML.innerHTML = choiceHTML;

For appending a child, you'd need to use document.createElement to create an actual node.