JavaScript实现API新请求结果覆盖浏览器旧展示内容的方案咨询

问题核心原因 #

你当前代码里所有更新结果的逻辑用的都是innerHTML +=语法，+=的作用是在原有内容的末尾追加新内容，这就是页面越来越长的直接原因。JSON序列化后的字符串就是普通文本，完全可以直接赋值给innerHTML覆盖原有内容，不需要用到replaceChild或者字符串替换方法，你之前的思路走偏了。

具体修改位置 #

三个函数里的这行代码：

document.getElementById('results').innerHTML += "<br/>"+string;

把+=替换成=即可实现覆盖旧内容的需求，改完之后是：

// 如果需要保留内容前的换行可以写为 "<br/>"+string
document.getElementById('results').innerHTML = string;

最优优化方案 #

你的三个函数逻辑高度重复，完全可以抽成公共函数减少冗余代码，优化后完整代码如下：

<body>
<button onclick="getData('awardees')">View NDNP Awardees</button>
<button onclick="getData('ocr')">View Recently-Added OCR'd Pages</button>
<button onclick="getData('batches')">View Available Batches</button>

<script>
// 公共请求函数，传入不同的接口类型即可
function getData(type){
    const url = `https://chroniclingamerica.loc.gov/${type}.json`
    fetch(url)  
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        // 第三个参数2代表缩进空格数，可让展示的JSON格式更易读
        const string = JSON.stringify(myJson, null, 2);
        // 直接赋值覆盖旧内容
        document.getElementById('results').innerHTML = string;
    });
}
</script>

<div id ="ticket">
<span id="results"></span>
</div>

</body>
</html>

优化后后续如果要新增同类型的接口，只需要加一个按钮传对应的type参数即可，不用再重复编写整个请求逻辑。

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