如何添加“加载更多..”用于html或js格式的博客的选项？

<div id="blog-list"></div>
<button id="load-more">加载更多...</button>

var blogArticles = [
  { title: "文章标题1", content: "文章内容1", author: "作者1" },
  { title: "文章标题2", content: "文章内容2", author: "作者2" },
  { title: "文章标题3", content: "文章内容3", author: "作者3" },
  // 其他博客文章...
];

var perPage = 5;
var currentIndex = 0;

function loadMoreArticles() {
  var blogList = document.getElementById("blog-list");
  var loadMoreBtn = document.getElementById("load-more");

  for (var i = currentIndex; i < currentIndex + perPage; i++) {
    if (i >= blogArticles.length) {
      loadMoreBtn.style.display = "none";
      break;
    }

    var article = blogArticles[i];
    var articleElement = document.createElement("div");
    articleElement.innerHTML = "<h2>" + article.title + "</h2><p>" + article.content + "</p><p>作者：" + article.author + "</p>";
    blogList.appendChild(articleElement);
  }

  currentIndex += perPage;
}

document.getElementById("load-more").addEventListener("click", loadMoreArticles);