Untitled

<html>
  <head>
    <title>FOO </title>
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        console.log('ready');

        var data = [
          { "amount":"medium",
            "notes":"chicken teriyaki bento box",
            "date_time":"1391029200",
            "type":"lunch",
            "id":18},

          { "amount":"small",
            "notes":"bread, meat balls",
            "date_time":"1391645306",
            "type":"lunch",
            "id":24}
        ];

        data.forEach(function(row) {
            for (var key in row) {
              $('body').append(row[key] + ' ');
            }
            $('body').append('<br>');
          });

        // append to table
        (function() {
          var my_table_jq = $("#my_table");
          $('body').append(Object.prototype.toString.call(my_table_jq));

          var my_table_js = document.getElementById('my_table');
          $('body').append(Object.prototype.toString.call(my_table_js));

        })();


      });
    </script>
  </head>
  <body>
    <table id="my_table" border="1">
      <tr>
        <th>Date</th><th>Meal</th><th>Amount</th><th>Notes</th>
      </tr>
    </table>
  </body>
</html>

$('#my_table')

$('#my_table')[0]

$('#my_table').get(0)

<!DOCTYPE html>
<html>
<head>
    <title>FOO </title>
    <script src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            console.log('ready');

            var data = [
              {
                  "amount": "medium",
                  "notes": "chicken teriyaki bento box",
                  "date_time": "1391029200",
                  "type": "lunch",
                  "id": 18
              },

              {
                  "amount": "small",
                  "notes": "bread, meat balls",
                  "date_time": "1391645306",
                  "type": "lunch",
                  "id": 24
              }
            ];

            data.forEach(function (row) {
                $('#my_table tbody').append('<tr>');
                $('#my_table tbody').append('<td>' + row['date_time'] + '</td>');
                $('#my_table tbody').append('<td>' + row['type'] + '</td>');
                $('#my_table tbody').append('<td>' + row['amount'] + '</td>');
                $('#my_table tbody').append('<td>' + row['notes'] + '</td>');
                $('#my_table tbody').append('</tr>');
            });

        });
    </script>
</head>
<body>
    <table id="my_table" border="1">
        <tr>
            <th>Date</th>
            <th>Meal</th>
            <th>Amount</th>
            <th>Notes</th>
        </tr>
    </table>
</body>
</html>

document.getElementById('my_table'); //returns a HTML DOM Object

$('#my_table');  //returns a jQuery Object

$('#my_table')[0]; //returns a HTML DOM Object