Dynamically Built DOM via jQuery For Loop Issue

Question

Apologies in advance... this seems so straightforward but it's as iff my append in the for loop acts as an html method and overwrites the inner html.

$(function () {
    var wrapper = $('<div />', {
        class: 'row'
    }),
    button = $('<div />', {
        class: 'column'
    }),
    buttons = [];
    for (var i = 0; i < 2; i++) {
        var btn = (i % 2)? button.html(i + 1) : button.addClass('last').html(i + 1);
        buttons.push(btn);
        if (i % 2) {
            console.log('buttons', buttons);
            $('.container').append(wrapper.append(buttons));
            console.log('wrapper', wrapper);
            console.log('container', $('.container'));
            buttons = [];
        }
    }
});

Fiddle Here

What is your issue? Question's title and text look unclear for me. — Regent
– Regent, Commented Aug 28, 2014 at 5:45

Arun P Johny · Accepted Answer · 2014-08-28 05:46:08Z

3

when you a object created outside in a loop to add to multiple elements, you need to clone them else you will be just replacing the element from one location to another

$(function () {
    var wrapper = $('<div />', {
        class: 'row'
    }),
        button = $('<div />', {
            class: 'column'
        }),
        btn, wr;
    for (var i = 0; i < 5; i++) {
        btn = button.clone().html(i + 1);
        if (i % 2 == 0) {
            wr = wrapper.clone().appendTo('.container');
            btn.addClass('last')
        }
        wr.append(btn)
    }
});

Demo: Fiddle

answered Aug 28, 2014 at 5:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamically Built DOM via jQuery For Loop Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related