我今天一直在练习我的 Vanilla Js/jQuery 技能，方法是使用 news-api 组合一个新闻源应用程序。 .
我已经包含了我的代码的 jsfiddle 链接 here 。不过，我已经删除了我的 API key 。
首次加载页面时，当用户单击媒体导出的图像时，例如“techcrunch”，使用 addEventListener，我将图像的 id 属性 传递到 API 端点 'https://newsapi. org/v1/articles' 并运行 GET 请求，然后继续创建包含新闻文章内容的 div 元素。
但是，单击 1 个图像后，我无法重新加载内容，除非我手动或使用 location.reload() 重新加载整个页面。
单击另一个图像时，新的 GET 请求正在运行并返回结果，因为我正在控制台记录结果。
我正在寻找一些关于如何使用每个新的 GET 请求重新加载页面内容的一般指导。
任何帮助将不胜感激。
非常感谢您抽出时间。
API约定:
例如https://newsapi.org/v1/articles?source=techcrunch&apiKey=APIKEYHERE
事件监听器:
sourceIMG.addEventListener('click', function() {
$.get('https://newsapi.org/v1/articles?source=' + this.id + '&sortBy=latest&apiKey=APIKEYHERE', function(data, status) {
console.log(data);
latestArticles = data.articles;
for (i = 0; i < latestArticles.length; i++) {
//New Article
var newArticle = document.createElement("DIV");
newArticle.id = "article";
newArticle.className += "article";
//Title
//Create an h1 Element
var header = document.createElement("H1");
//Create the text entry for the H1
var title = document.createTextNode(latestArticles[i].title);
//Append the text to the h1 Element
header.appendChild(title);
//Append the h1 element to the Div 'article'
newArticle.appendChild(header);
//Author
var para = document.createElement("P");
var author = document.createTextNode(latestArticles[i].author);
para.appendChild(author);
newArticle.appendChild(para);
//Description
var description = document.createElement("H4");
var desc = document.createTextNode(latestArticles[i].description);
description.appendChild(desc);
newArticle.appendChild(description);
//Image
var image = document.createElement("IMG");
image.src = latestArticles[i].urlToImage;
image.className += "articleImg";
newArticle.appendChild(image);
//Url link
//Create a href element
var a = document.createElement('a');
var link = document.createElement('p');
var innerLink = document.createTextNode('Read the full story ');
link.appendChild(innerLink);
a.setAttribute("href", latestArticles[i].url);
a.innerHTML = "here.";
link.appendChild(a);
newArticle.appendChild(link);
//Append the Div 'article' to the outer div 'articles'
document.getElementById("articles").appendChild(newArticle);
}
});
}, false);
最佳答案
我使用 API key 尝试了你的 fiddle 。它对我有用，因为内容新内容被附加到 #articles div 中的先前内容。如果我理解您的问题，那么当单击新闻服务图像时，您只想显示该新闻服务的文章。为此，您需要在附加新内容之前清除#articles 的内容。
要使用纯 js 执行此操作，您可以在 for 循环上方使用以下内容:
// Removing all children from an element
var articlesDiv = document.getElementById("articles");
while (articlesDiv.firstChild) {
articlesDiv.removeChild(articlesDiv.firstChild);
}
for (i = 0; i < latestArticles.length; i++) {...
完全公开，我添加了变量名称“articlesDiv”，但上面的代码片段来自 https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
关于javascript - 使用每个新的 GET 请求刷新 html 内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40726288/