AJAX Problem. Won't recognise the HTML on my page.

Hello Treehouse folk.

I've got something of a mystery on my hands here! I have a simple AJAX request based on Dave's example in the first stage of the course. It's just pulling in the same sidebar.html page.

I put it on my website as an addon domain but I don't see why that should be an issue as it's the same server.

Anyway here's my script.

<script>

        //create a variable named xhr and assign it a new XMLHttpRequest object.
        var xhr = new XMLHttpRequest();

        //Open the Ajax Request using GET method and point to file on server
        xhr.open('GET', 'sidebar.html');

        //callback function of AJAX Request
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                document.getElementById('ajax').innerHTML = xhr.responseText;
            }
        };

        xhr.send();

    </script>

And I get this response from the console.

Uncaught TypeError: Cannot set property 'innerHTML' of null

It doesn't seem to like innerHTML for some reason. It's not so much a problem with sending the request as that logs just fine but the HTML doesn't display.

Any ideas? http://www.jonniegrieve.co.uk/jg-lab.co.uk/ajax.html