Browser console is returning null for document.getElementById() (table element)

I’m very confused why my console output is null when I’m trying to get an element by id.

I have a table and I want to append rows to my table body via JS but first I need to get the tbody element by its id.

This is my code:

<tbody id='startNode'>
  <tr>
    <td>1</td>
  </tr>
<tbody>

var startNode = document.getElementById('startNode');
console.log(startNode);

I’m not sure if this could be a side effect but in a <script> I have a jQuery function and other JS functions.

$(document).ready(function() {
  $(".img-preview").click(function(ev) {
    var prevPos = $(".img-preview").position();
    console.log(prevPos);
    
    $(".marker").remove();
    
    console.log(ev.pageY - prevPos.top)
    console.log(ev.pageX - prevPos.left)
    
    $(".img-preview").append(
      $('<div class="marker"></div>').css({
        position: 'absolute',
        top: (ev.pageY - prevPos.top) + 'px',
        left: (ev.pageX - prevPos.left) + 'px',
        width: '5px',
        height: '5px',
        background: '#ff0000'
      })
    );
  });
});