HTML not rendering in browser using jQuery append with for loop

user_15349785 0
Viewed 118

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

jquery javascript
1 Answers

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.

user_5194130
Related