如何使用原生JS仅刷新单个DOM元素实现点赞数自动更新？

有两种常见方案可以解决这个问题，无需刷新页面就能实时更新点赞数：

方案1：乐观更新（本地直接修改数值） #

API调用成功后，直接将显示点赞数的元素数值加1，这种方式响应快，用户体验流畅：

// 显示点赞数
const likeCounter = document.createElement("p");
likeCounter.classList.add("comments__container-content-like-counter");
functionsDiv.appendChild(likeCounter);
likeCounter.innerText = commentData.likes;

// 点赞按钮点击事件
commentLike.addEventListener("click", () => {
    const addLike = commentData.id;

    axios.put(`${baseURL}comments/${addLike}/like?api_key=${apiKEY}`)
    .then(() => {
        console.log("点赞成功！");
        // 将当前点赞数转为数字后加1，更新DOM内容
        const currentLikes = Number(likeCounter.innerText);
        likeCounter.innerText = currentLikes + 1;
    })
    .catch(error => {
        console.error("点赞失败：", error);
        // 可选：请求失败时可给用户提示，或把数值回退
    });
});

方案2：重新获取最新数据（保证数据一致性） #

如果担心本地修改与实际API数据不一致，可在点赞成功后重新请求该评论的最新数据，再更新DOM：

// 显示点赞数
const likeCounter = document.createElement("p");
likeCounter.classList.add("comments__container-content-like-counter");
functionsDiv.appendChild(likeCounter);
likeCounter.innerText = commentData.likes;

// 点赞按钮点击事件
commentLike.addEventListener("click", () => {
    const addLike = commentData.id;

    axios.put(`${baseURL}comments/${addLike}/like?api_key=${apiKEY}`)
    .then(() => {
        // 点赞成功后，请求该评论的最新数据
        return axios.get(`${baseURL}comments/${addLike}?api_key=${apiKEY}`);
    })
    .then(response => {
        // 用最新的点赞数更新DOM
        likeCounter.innerText = response.data.likes;
        console.log("点赞数已更新");
    })
    .catch(error => {
        console.error("操作失败：", error);
    });
});

两种方案对比 #

• 乐观更新：无需额外请求，响应快，适合大部分普通场景；但如果API请求意外失败，会出现本地数值与实际数据不一致的情况，需做好错误处理。
• 重新获取数据：数据绝对准确，但多一次API请求，响应稍慢，适合对数据一致性要求极高的场景。

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