如何使用按钮加载下一页的API的数据点击“加载更多”？

// HTML
<button id="loadMoreBtn">加载更多</button>
<div id="dataContainer"></div>

// JavaScript
var page = 1; // 当前页数

document.getElementById("loadMoreBtn").addEventListener("click", function() {
  var url = "https://api.example.com/data?page=" + page;

  fetch(url)
    .then(response => response.json())
    .then(data => {
      // 解析并展示数据
      var container = document.getElementById("dataContainer");
      data.forEach(item => {
        var element = document.createElement("div");
        element.textContent = item.title;
        container.appendChild(element);
      });

      // 更新页数
      page++;

      // 判断是否还有更多数据可加载
      if (data.length === 0) {
        document.getElementById("loadMoreBtn").disabled = true;
        // 或显示“已加载全部数据”的提示
      }
    })
    .catch(error => {
      console.error("Error:", error);
    });
});