CODEWITHSUNDEEP
javascriptjquery
user3326384
user3326384

Reputation: 43

jQuery $("#someId) vs document.getElementById('someId'), accessing the same DOM element seeing different results

I'm a javascript and jQuery newbie, so this might be a silly question -

I'm experimenting appending rows to an html table and I'm seeing something that strikes me as odd:

when I access my html table using document.getElementById('my_table') i get back object HTMLTableElement, and then I can do things like insertRow(-1), etc., but when I access the same html table via jquery - $('#my_table') i get back object Object, which obviously does not have any of the methods I need. What gives?

Thank you!

Here's the code:

<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>

Upvotes: 1

Views: 512

Answers (3)

Kumudu
Kumudu

Reputation: 136

When you are accessing objects like $('#my_table') you get a jQuery object. You can use the jQuery API to manipulate this object. For instance if you are looking to add remove rows to the table you can do so by using functions like "append". You can refer to the jQuery api documentation here. As an example I have edited your code to add your JSON object data to the table

<!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>

Upvotes: 1

Adil
Adil

Reputation: 148180

The object you get through jQuery id selector is jQuery object not the DOM object, you must convert it to DOM object. You can use indexer to convert it to DOM object. You can also use jQuery .get( index ) to get the DOM object.

Change

$('#my_table')

To

$('#my_table')[0]

or

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

Calling jQuery() (or $()) with an id selector as its argument will return a jQuery object containing a collection of either zero or one DOM element, jQuery doc.

Upvotes: 2

rajesh kakawat
rajesh kakawat

Reputation: 10906

try something like this

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

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

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

document.getElementById('id') will return a raw DOM object.

$('#id') will return a jQuery object that wraps the DOM object and provides jQuery methods.

Upvotes: 0

Related Questions