Refresh HTML-Inhalt mit jeder neuen GET-Anfrage

Question

Ich war Üben meine Vanille Js/jQuery Fähigkeiten heute durch zusammen eine Newsfeed-App mit der news-api werfen.

Ich habe einen Link zu einem jsfiddle meines Codes here eingefügt. Ich habe jedoch meinen API Schlüssel entfernt.

Wenn der Benutzer beim ersten Laden der Seite auf ein Bild für einen Medienausgang klickt, z. "techcrunch", unter Verwendung eines, gebe ich die id attribute des Bildes an den API Endpunkt 'https://newsapi.org/v1/articles' weiter und führe eine GET Anfrage aus, die dann fortfährt, div Elemente mit dem Nachrichtenartikelinhalt zu verursachen.

Jedoch, nach dem Klicken auf 1 Bild, kann ich nicht den Inhalt neu laden, es sei denn, ich lade die ganze Seite manuell oder mit location.reload().

Beim Klicken auf ein anderes Bild die neue GET Anfrage ist läuft und zurückgibt Ergebnisse, wie ich Konsole Protokollierung der Ergebnisse bin.

Ich suche nach einer allgemeinen Anleitung, wie Sie den Seiteninhalt mit jeder neuen GET Anfrage neu laden lassen.

Jede Hilfe würde sehr geschätzt werden.

Vielen Dank für Ihre Zeit.

Api Konvention:

beispiels https://newsapi.org/v1/articles?source=techcrunch&apiKey=APIKEYHERE

Eventlistener:

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

ich Ihre Geige versucht, eine api Schlüssel. Es funktioniert für mich in diesem Inhalt neuer Inhalt wird an den vorherigen Inhalt in der # Articles div angehängt. Wenn ich Ihre Frage verstehe, möchten Sie beim Klicken auf ein Nachrichten-Service-Bild nur die Artikel des News-Service anzeigen. Dazu müssten Sie den Inhalt von #articles löschen, bevor Sie neuen Inhalt hinzufügen.

Um das zu tun mit einfachen js Sie folgende über Ihre for-Schleife verwenden:

// 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++) {... 

vollständige Offenlegung, fügte ich der Variablenname ‚articlesDiv‘ aber ansonsten ist das obige Snippet kam von https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild