appendTo not working

Question

Good Evening,

I have the following code

$( document ).ready(function() {
    $.get( "php/get_ratings.php")

        .done(function(data) {
            $("#newrow").html('');
            $("#list_loc").html('');
            var results = jQuery.parseJSON(data);

            $.each(results, function(i, value) {
                var newrow =   $("<div />", {
                    id : "new"+results[i].id
                });
                var newLoc = $("<div />", {
                    id: "loc"+results[i].id,
                    text: results[i].city
                });
                $("#newrow").append(newrow);
                $("#list_loc").append(newLoc);

                $('#list_loc').appendTo('#newrow');
            })
        });
});

html

<div class="container">
   <div class="row list">
     <div id="newrow">
       <div class="row">
          <div class="col-md-12">
             <div id="list_loc">
             </div>
          </div>
       </div>
     </div>
    </div>
 </div>

What i am trying to achieve is to create two dynamic div's and then insert one div into the other but for some reason i only get my "newrow" div. Can someone please explain what i am doing wrong?

Thanks in advance,

D

P.S what i am expecting the final html to look like is

<div class="list">
 <div id="row1">
   <div id="loc1">
   </div>
 <div id="row2">
  <div id="loc2">
  </div>
 </div>
</div>

Answer 1

Try this:

$(document).ready(function () {
    $.get("php/get_ratings.php")
            .done(function (data) {
                $("#newrow").html('');
           //   $("#list_loc").html(''); No point, you already cleared it in the line above
                var results = jQuery.parseJSON(data);

                $.each(results, function (i, value) {
                    var newrow = $("<div />", {
                        id: "new" + results[i].id
                    }).append( //new loc is appeneded directly to new row
                            $("<div />",
                                    {
                                        id: "loc" + results[i].id,
                                        text: results[i].city
                                    })
                            );

                    $("#newrow").append(newrow);
                });
            });
});