How to fix error in code api used javascript

I'm setting up a code working to Connect to an API with JavaScript.

In line 9 and 10:

app.appendChild(logo);
app.appendChild(container);

I have the following error:

Unhandled exception at line 9, column 1 in ms-appx-web://ee3edcbd-0963-4d4b-a1e7-09cd199e440e/js/main.js 0x800a138f - JavaScript runtime error: Unable to get property 'appendChild' of undefined or null reference.

What is the solution to enable the code to be successfully activated?

const app = document.getElementById('root');

const logo = document.createElement('img');
logo.src = 'logo.png';

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function () {

    // Begin accessing JSON data here
    var data = JSON.parse(this.response);
    if (request.status >= 200 && request.status < 400) {
        data.forEach(movie => {
            const card = document.createElement('div');
            card.setAttribute('class', 'card');

            const h1 = document.createElement('h1');
            h1.textContent = movie.title;

            const p = document.createElement('p');
            movie.description = movie.description.substring(0, 300);
            p.textContent = `${movie.description}...`;

            container.appendChild(card);
            card.appendChild(h1);
            card.appendChild(p);
        });
    } else {
        const errorMessage = document.createElement('marquee');
        errorMessage.textContent = `Gah, it's not working!`;
        app.appendChild(errorMessage);
    }
}

request.send();

The problem is your element with id 'root' does not exist in your DOM.