Resetting a div's content?

Question

I am looking for a way to reset a divs content.

I have a div(container) and div(card) that hold images from an API. How could I reset the divs content that is already populated?

    //Here is how I am populating the card div
    const card = document.createElement('div');
    card.setAttribute('class', 'card');

    const img = document.createElement('img');
    img.src = photo["urls"].regular;

    container.appendChild(card);
    card.appendChild(img);```

How could I refresh the div alone to achieve a 'refresh' to load the new content?

Answer 1

container.removeChild(container.lastChild);

This will remove the image and the last card added. Then you can just call the same code to add the new card.

Answer 2

You can use document.getElementById('content').innerHTML = '';

Example in JSFiddle : https://jsfiddle.net/gbvqf8ru/8/