I want to dynamically create html element, but when trying to append some element inside the container in loop it is not working. Why?

var html = '<div id="' + question.id + '"> \
                <div class="quizlib-question">  \
                    <div class="well well-sm quizlib-question-title"><strong>' + question.title + '</strong></div>  \
                    <div class="quizlib-question-answers"></div> \
                </div> \
            </div>';

for (var i=0; i < question.choices.length; i++) {
    var answerHTML = '<div class="radio quizlib-question-answer"><label><input type="radio" name="' + question.name + '" value="' + i + '">' + question.choices[i] + '</label></div>';
    //this part is nor working
    $(html).find(".quizlib-question-answers").append(answerHTML);
}

$('body').append(html);

I want to dynamically create html element, but when trying to append some element inside the container in loop it is not working. Why?

var html = '<div id="' + question.id + '"> \
                <div class="quizlib-question">  \
                    <div class="well well-sm quizlib-question-title"><strong>' + question.title + '</strong></div>  \
                    <div class="quizlib-question-answers"></div> \
                </div> \
            </div>';

for (var i=0; i < question.choices.length; i++) {
    var answerHTML = '<div class="radio quizlib-question-answer"><label><input type="radio" name="' + question.name + '" value="' + i + '">' + question.choices[i] + '</label></div>';
    //this part is nor working
    $(html).find(".quizlib-question-answers").append(answerHTML);
}

$('body').append(html);

• javascript
• jquery

• 2 You are appending the answerHtml to a jQuery object which contains the html variable, but you never append that to the DOM, hence nothing actually appears to happen – Rory McCrossan Commented Jun 2, 2016 at 15:48

3 Answers 3

This line:

$(html).find(".quizlib-question-answers").append(answerHTML);

does not update the string variable html, it appends to a jQuery object which has been created initially with the contents of html.

To fix this, append the jQuery object to the dom, not html. Start by creating the jQuery object initially

var $html = $('<div id="' + question.id + '"> \
            <div class="quizlib-question">  \
                <div class="well well-sm quizlib-question-title"><strong>' + question.title + '</strong></div>  \
                <div class="quizlib-question-answers"></div> \
            </div> \
        </div>');

(Note, I prefix jQuery objects with $ by convention)

Then append as normal:

for (var i=0; i < question.choices.length; i++) {
    var answerHTML = '<div class="radio quizlib-question-answer"><label><input type="radio" name="' + question.name + '" value="' + i + '">' + question.choices[i] + '</label></div>';
    //this part is nor working
    $html.find(".quizlib-question-answers").append(answerHTML);
}

Finally add that to the DOM

$('body').append($html);

The problem is because you are appending html to the DOM, yet you never update the html variable. Instead you're creating a jQuery object from that variable, but you never do anything with it.

To fix this, try creating a jQuery object from html immediately and then append that to the DOM before doing your loop, like this:

var $html = $('<div id="' + question.id + '"> \
    <div class="quizlib-question">  \
        <div class="well well-sm quizlib-question-title"><strong>' + question.title + '</strong></div>  \
        <div class="quizlib-question-answers"></div> \
    </div> \
</div>').appendTo('body');

for (var i = 0; i < question.choices.length; i++) {
    var answerHTML = '<div class="radio quizlib-question-answer"><label><input type="radio" name="' + question.name + '" value="' + i + '">' + question.choices[i] + '</label></div>';
    $html.find(".quizlib-question-answers").append(answerHTML);
}

Working example

Like the menter mentioned, you have to append to the body before you start searching for those DOM elements you created. For example:

var html = '<div id="' + question.id + '"> \
                <div class="quizlib-question">  \
                    <div class="well well-sm quizlib-question-title"><strong>' + question.title + '</strong></div>  \
                    <div class="quizlib-question-answers"></div> \
                </div> \
            </div>';
$('body').append(html);

for (var i=0; i < question.choices.length; i++) {
    var answerHTML = '<div class="radio quizlib-question-answer"><label><input type="radio" name="' + question.name + '" value="' + i + '">' + question.choices[i] + '</label></div>';
    //this part is nor working
    $(".quizlib-question-answers").append(answerHTML);
}