用每個新的GET請求更新html內容

Question

我一直在練習我的Vanilla Js/jQuery技能今天通過使用news-api投擲新聞源應用程序。

我已經包含一個鏈接到我的代碼的一個jsfiddle here。但是，我已經刪除了我的API密鑰。

在頁面的第一次加載時，當用戶點擊媒體插座的圖像時，例如， 'techcrunch'，使用addEventListener，我將圖像的id attribute傳遞到API終點'https://newsapi.org/v1/articles'並運行GET請求，然後繼續創建帶有新聞文章內容的div元素。

但是，點擊1張圖片後，我無法重新加載內容，除非我手動或使用location.reload()重新加載整個頁面。

點擊另一張圖片時，新的GET請求是運行並返回結果，因爲我正在控制檯記錄結果。

我正在尋找一些關於如何讓頁面內容重新加載每個新的GET請求的一般指導。

任何幫助將不勝感激。

非常感謝您的時間。

API慣例：

e.g 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); 

Answer 1

我使用API​​密鑰想你的小提琴。它在爲我工作的內容中添加了新的內容到#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