I have this code that what it does is list the title of the latest posts of a blogger through the API using javascript, the problem is that the first time it does not work, but when I reload it it works correctly, everything without showing any error

My code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="content"></div>

<script>

function handleResponse(response) {
  console.log("response");
  console.log(response);
  for (i = 0; i < response.items.length; i++) {
    var titleHtml = '<div id="post' + (i + 1) + '" class="post"><p>' + response.items[i].title + '</p></div>';
    $('#content').append(titleHtml);
  }
}
</script>

<script src="https://www.googleapis.com/blogger/v3/blogs/BLOGID/posts?callback=handleResponse&key=APIKEY"></script>