Question

I would like to build this html structure with jQuery:

<div id="container">
    <div id="row0">
        <div id="start0"></div>
        <div id="end0"></div>
    </div>
    <div id="row1">
        <div id="start1"></div>
        <div id="end1"></div>
    </div>
</div>

and this is what i did but it is ugly and not working as expected. can you please help me. Thank you.

var count = 0;
$("#target").click(function() {
    $('#container').append($('<div></div>')
                    .attr({ id : "row" + count })
                    .addClass("test"));

    for (var i = 0; i < 2; i++) {
        $("#row" + count).append('<div id="start' + count + '</div');
        $("#row" + count).append('<div id="end' + count + '</div');
    } 
    count++;
});

Answer 1

It can be done so:

for (var i = 0; i < 2; i++) {
    var start = $("<div />", { id : "start" + i });
    var end = $("<div />", { id : "end" + i });
    $("<div />", { id : "row" + i }).append(start, end).appendTo("#container");
}

DEMO: http://jsfiddle.net/SyLKc/