Add a new list item to a <ul> item when using a for loop with JavaScript [duplicate]

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

helion3 · Accepted Answer · 2015-11-12 18:46:44Z

0

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.

answered Nov 12, 2015 at 18:46

helion3

38k16 gold badges66 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Michael Patrick Ross Over a year ago

Thanks helion3, makes more sense now, I'll work on doing that.

Collectives™ on Stack Overflow

Add a new list item to a <ul> item when using a for loop with JavaScript [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related