Refresh angehängt Element ohne die ganze Seite neu zu laden

Question

Ich bekomme Tiere aus einer JSON-Datei nach dem Zufallsprinzip und Teilen von Buchstaben in eine Spanne und fügen Sie eine .wrapper div.

Aber wenn ich JSON nachladen, hängt neues Tier dort an und altes verschwindet nicht.

Wie kann ich Brief mit html() methtod teilen oder wie kann ich bestimmte div laden, ohne die ganze Seite zu aktualisieren?

Klicken Sie auf Aktualisieren, Sie sehen, dass ein neuer Tiername das Div (wie wir erwarten) anfügt. Ich bin nur auf der Suche nach der Lösung mit append() Methode oder nicht.

JSFIDDLE

function loadJson() { 

    $.getJSON('https://raw.githubusercontent.com/boennemann/animals/master/words.json', function(data) { 

    var s = data[Math.floor((Math.random() * data.length))]; 

    for (i = 0; i < s.length; i++) { 

     var $span = $("<span>", { 
     class: " letter" + i 
     }).appendTo(".wrapper");; 
     $span.append(s[i]); 
    } 
    }); 

} 

loadJson(); 

$("button").click(function() { 
    loadJson(); 
}); 

Answer 1

Verwendung $ ('classname '). Empty() vor append .. https://jsfiddle.net/9wsjf90r/1/

function loadJson() { 

    $.getJSON('https://raw.githubusercontent.com/boennemann/animals/master/words.json', function(data) { 

    var s = data[Math.floor((Math.random() * data.length))]; 
$('.wrapper').empty(); 
    for (i = 0; i < s.length; i++) { 

     var $span = $("<span>", { 
     class: " letter" + i 
     }).appendTo(".wrapper");; 

     $span.append(s[i]); 
    } 
    }); 

} 

loadJson(); 

$("button").click(function() { 
    loadJson(); 
});