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

Share Improve this question Follow edited Jun 2, 2016 at 15:50 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Jun 2, 2016 at 15:46 Below the RadarBelow the Radar 7,6351111 gold badges6969 silver badges145145 bronze badges 1

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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);
}