i 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 id.

This is my code:

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

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

I’m not sure if this could be a side effect but in i have a one 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'
                })
            );
        });
    });