Actualiser l'élément ajouté sans recharger la page entière

Question

Je reçois des animaux à partir d'un fichier json de manière aléatoire et en divisant les lettres en une travée et en y ajoutant un .wrapper div. Mais quand je recharge json, un nouvel animal s'y ajoute et l'ancien ne disparaît pas.

Comment puis-je fractionner une lettre en utilisant html() methtod ou comment puis-je recharger une variable spécifique sans actualiser la page entière?

Cliquez sur le bouton d'actualisation, vous voyez un nouveau nom d'animal ajoute le div (comme nous l'espérons). Je suis juste à la recherche de la solution avec la méthode append() ou non.

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

utilisation $ ('classname '). Empty() avant 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(); 
});