Problem with API in Javascript

I was following one of online tutorials and everything worked fine. But when I added one addition to the page, it doesn’t show up… here is the code:

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

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

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


var request = new XMLHttpRequest();'GET', '', 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 h5 = document.createElement('h5');
      h5.textContent = movie.release_date;

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

  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;


I only added this part myself:

      const h5 = document.createElement('h5');
      h5.textContent = movie.release_date;

Could anyone explain me why it doesn’t work?

What shows in the console? Are you getting an error message?

You have created the element but you have not appended it to the card.

yeah, looks like you should add a line: card.appendChild(h5);

@ snowmonkey: there was no error in the console
@alhazen1 @MatthewDorner: thanks a lot, that was the problem :slight_smile: