HTML not rendering in browser using jQuery append with for loop

Question

Trying to dynamically update the choices in the trivia game using a for loop with jQuery append, but the browser is not rendering the choiceText variable.

    for (let i = 0; i < allChoices[0].length; i++) {
        let allChoicesFin = allChoices[0];

        const choiceContainer = $('.choice-container');

        let choiceText =
            '<span class="px-2 text-start">' + allChoicesFin[i] + '</span>';

        choiceContainer[i].append(`${choiceText}`);
    }

picture of the trivia game where the HTML is not rendering

Hello and welcome. Instead of "append", try to use innerHtml attribute. — AntiqTech
– AntiqTech, Commented Mar 7, 2021 at 21:10

Rory McCrossan · Accepted Answer · 2021-03-07 21:11:02Z

1

The issue is because you're accessing the jQuery object by index. This will return an Element object, not a jQuery object, so you're using the native append() method, not the jQuery one. As such the string is injected as text content, not a DOM string.

To fix this change choiceContainer[i] to choiceContainer.eq(i):

let allChoices = [['foo', 'bar']];
let allChoicesFin = ['lorem', 'ipsum'];
const $choiceContainer = $('.choice-container');

for (let i = 0; i < allChoices[0].length; i++) {
  $choiceContainer.eq(i).append(`<span class="px-2 text-start">${allChoices[0][i]}</span>`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="choice-container"></div>
<div class="choice-container"></div>

Note that I made a couple of tweaks to the logic to tidy it up a little, such as defining $choiceContainer outside of the loop, removing one unnecessary template literal, and adding one which was necessary.

answered Mar 7, 2021 at 21:11

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

2 Comments

Tim Over a year ago

Thank you so much, Rory, just learned a whole heap! Would've taken hours figuring that out by myself!

Rory McCrossan Over a year ago

No problem, glad to help

Collectives™ on Stack Overflow

HTML not rendering in browser using jQuery append with for loop

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related