如何使用HTML、JS将GitHub仓库贡献者列表渲染到页面div中

首先在HTML页面中添加用于承载贡献者列表的容器：

<div class="contributor-list"></div>

修改你的JS代码如下即可实现每个贡献者login单独放在div中展示的需求：

const getUsers = () => {
    axios
        .get(
            // 请将路径中的{owner}和{repo}替换为实际的仓库所有者用户名、仓库名称
            "https://api.github.com/repos/{owner}/{repo}/contributors"
        )
        .then((response) => {
            const users = response.data;
            const listContainer = document.querySelector(".contributor-list");
            // 清空容器避免重复渲染
            listContainer.innerHTML = "";

            // 遍历所有贡献者数据，逐个生成DOM节点
            users.forEach((contributor) => {
                const itemDiv = document.createElement("div");
                // 添加类名方便后续自定义样式
                itemDiv.classList.add("contributor-item");
                itemDiv.innerText = contributor.login;
                listContainer.appendChild(itemDiv);
            });
        })
        .catch((error) => console.error(error));
};
getUsers();

如果需要同时展示头像、贡献数等其他字段，可调整生成div的逻辑，示例如下：

itemDiv.innerHTML = `
  <img src="${contributor.avatar_url}" alt="头像" width="48" style="border-radius: 50%;">
  <span>${contributor.login}（贡献数：${contributor.contributions}）</span>
`;

内容的提问来源于stack exchange，提问作者zain