ページ全体を再読み込みせずに、追加された要素を更新する

Question

jsonファイルからランダムに動物を取得し、文字をスパンに分割して追加します（.wrapper div）。

私はjsonをリロードすると、新しい動物がそこに追加され、古いものは消えません。

html()を使ってレターを分割するにはどうしたらいいですか？またはページ全体を更新せずに特定のdivを再ロードするにはどうすればよいですか？

[更新]ボタンをクリックすると、新しい動物の名前が表示されます（期待どおり）。 append()メソッドを使用して解決策を探しています。

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

使用$（ 'クラス名 '）。（）追記前空.. 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(); 
});