jquery - jQuery: Build multi div structure

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/

Answer 2

Assuming that the "container" div already exists and the idea is that each time "target" (whatever that is) is clicked you want to add one child to the end of "container" div then the main thing stopping your code working is that you've used a variable currentRow that hasn't been defined. Change that to count and lose the for loop:

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

    $("#row" + count).append('<div id="start' + count + '"></div>');
    $("#row" + count).append('<div id="interval' + count + '"></div>');

    count++;
});

This can be made more efficient by not reselecting the new div twice:

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

Be sure the above is in a document ready or in a script block at the end of the body.

As pointed out by bažmegakapa you were missing the > from the end of the inner div tags.

Answer 3

What about this:

var count = 0;
$("#target").click(function() {

  var $currentRow = $('<div/>').attr({ id : "row" + count }).addClass("test")

  for (var i = 0; i < 2; i++) {
      $currentRow.append('<div id="start' + count + '"></div>');
      $currentRow.append('<div id="interval' + count + '"></div>');
  } 

  $('#container').append($currentRow);

  count++;
});

jsfiddle ​</p>

Answer 4

var count = 0; 
$("#target").click(function() { 
    $('#container').append('<div id="row'+ count +'" class="test"></div>')
    for (var i = 0; i < 2; i++) { 
        $("#row" + count).append('<div id="start' + count + '></div>'); 
        $("#row" + count).append('<div id="end' + count + '></div>'); 
    }
    count++; 
});