如何使用vanilla JS向页面上的项目添加“加载更多”功能？

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

document.getElementById("loadMoreBtn").addEventListener("click", loadMore);

function loadMore() {
  fetch("your-api-url")
    .then(response => response.json())
    .then(data => {
      // 处理获取到的数据
      // 将数据添加到页面上的项目中
    })
    .catch(error => {
      console.error("Error:", error);
    });
}

function loadMore() {
  fetch("your-api-url")
    .then(response => response.json())
    .then(data => {
      data.forEach(item => {
        // 创建新的HTML元素
        const newItem = document.createElement("div");
        newItem.textContent = item.title;
        // 将新元素添加到页面上的项目中
        document.getElementById("projectContainer").appendChild(newItem);
      });
    })
    .catch(error => {
      console.error("Error:", error);
    });
}