Question

Why the following code only appends the first div i add and not all of them?
(i stripped some code for the sake of argument).

Any tips on how to dynamically construct some nested divs with jquery are welcome.

    var divRow;
    var nRow = 0;
    var i = 0;

     $.each(data, function (key, value) {        
          nRow++;
          div.append("<div id='divRow" + nRow + "' style='position: relative; float: left; '></div>");
          divRow = $('divRow' + nRow);

          divRow.append("<div id='divBox" + i + "' style=position: relative; clear: both; padding: 5px'></div>");

          var divBox = $('divBox' + i);

          divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Word + "</div>");
          divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>");

          i++;
 });

Answer 1

You don’t have the # in your selector.

Instead of selecting an element you just created, I suggest using appendTo, like in this example from the jQuery website.

$('<p id="test">My <em>new</em> text</p>').appendTo('body');

For you, that’s:

var divRow;
    var nRow = 0;
    var i = 0;

     $.each(data, function (key, value) {        
          nRow++;
          div.append();
          var divRow = $("<div id='divRow" + nRow + "' style='position: relative; float: left; '></div>").appendTo(div);

          var divBox = $("<div id='divBox" + i + "' style=position: relative; clear: both; padding: 5px'></div>").appendTo(divRow);

          divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Word + "</div>");
          divBox.append("<div style='position: relative; clear: both; padding: 5px'>" + value.Description + "</div>");

          i++;
 });