CODEWITHSUNDEEP
javascriptjquery
Below the Radar
Below the Radar

Reputation: 7635

Find element then append in loop

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

Upvotes: 3

Views: 1644

Answers (3)

Jordan Rhea
Jordan Rhea

Reputation: 1206

Like the commenter 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);
}

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337560

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

Upvotes: 4

Jamiec
Jamiec

Reputation: 136104

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

Upvotes: 4

Related Questions