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

使用vanilla JS向页面上的项目添加“加载更多”功能可以通过以下步骤实现：

首先，在HTML文件中创建一个按钮或链接，用于触发加载更多的操作。例如：

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

在JavaScript文件中，使用addEventListener方法为按钮添加点击事件监听器。当按钮被点击时，触发加载更多的函数。例如：

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

在加载更多的函数中，可以使用AJAX或fetch等技术从服务器获取更多的数据。这里以fetch为例，发送GET请求获取数据。例如：

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

在处理获取到的数据后，可以将数据添加到页面上的项目中。可以通过创建新的HTML元素，或者修改已有的HTML元素来实现。例如：

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);
    });
}