Trying to append an array of html elements to a div element on a page with jquery but it's not showing

Question

I am trying to add an array of html element to a div element on a page but it's not showing. When I do a console.log on the div element it prints the array confirming that the array is added to the div element yet it doesn't appear on the page. below is the code for what I.m trying to do:

html:

<form action="question" method="post">
    <div class="combobox">
        <label for="switchQuestion">Switch Question:</label>
        <select id="switchQuestion"></select>
    </div>
    <div id="go-btn">
        <input id="go" type="button" value="Go" />
    </div>
</form>

<div class="exam-container">
    <div id="exam-question"></div>
</div>

jquery:

const $examQuestions = $('#exam-question'),
output = [];

loadQuestions($examId, function(question){
    for(let i in question) {
        $switchQuestion.append($('<option />').val(question[i].id).text(Number(i)+1));
        loadChoices(question[i].id, question[i].multiAnswer, function(choices) {
            output.push(
                    `<div class='question'> ${(Number(i)+1)}. ${question[i].problemDescription} </div>
                     <div class='choices'> ${choices.join('')} </div>`
            );
        });
    }
});

output.join('');
$examQuestions.innerHTML = output;

function loadChoices(id, isMulti, callback) {
    let choices = [];
    $.ajax({
        url: location.protocol + '//' + location.host + '/online-test-exam-maker' +'/choices/' + id,
        dataType: 'json',
        type: 'GET',
        success: function (data, status) {
            let elemType = isMulti ? 'checkbox' : 'radio';
            $.each(data, function (i, v) {
                choices.push(
                    `<label>
                      <input type='${elemType}' name='${v.questionId}' value='${v.id}' id='${v.id}' />
                      ${v.choiceText}
                     </label>`
                );
            });
            if(typeof callback === 'function') {
                callback(choices);
            }
        },
        error: function(){
        }
    });
}

Still wrong, `innerHTML` doesn't exist in jQuery, use `.html()` instead — Pavlo, Jan 29 '18 at 19:33
i've tried .html() and .append() too but still not showing on the page. with these, the array is not added to the div element when I do console.log($examQuestions) — Hez, Jan 29 '18 at 19:52
Found the problem, if this doesn't work then i need to know how `loadQuestions()` is called. After `output.push()` you have to write `output.join(''); $examQuestions.html(choices);` — Pavlo, Jan 29 '18 at 20:36
`output.join('');` occurs while `output` is still an empty array. — Kevin B, Jan 29 '18 at 20:48
Just after output.push(), if i do $examQuestions.html(ouput.join(' ')), it works. Thank you for your help, Pavlo! — Hez, Jan 29 '18 at 21:37
@Kevin B It's not a duplicate question, I've edited the topic. — Hez, Jan 29 '18 at 21:50

score 0 · Answer 1 · answered Jan 29 '18 at 19:31

0

If you want to replace everything in the div do:

$examQuestions.html(output)

else you can also use jQuery's append method like:

$examQuestions.append(output)

answered Jan 29 '18 at 19:31

Eyk Rehbein

3,683
3
18
39

Trying to append an array of html elements to a div element on a page with jquery but it's not showing

1 Answers1