Javascript 刷新附加元素而不重新加载整个页面

我从一个json文件中随机获取动物，将字母拆分成一个span，并在其后面附加一个

.wrapper

div

但当我重新加载json时，新的动物会附加在那里，而旧的不会出现

如何使用

html（）

methtod拆分字母，或者如何在不刷新整个页面的情况下重新加载特定的div

单击刷新按钮，您将看到一个新的动物名称附加在div后面（正如我们所期望的那样）。 我只是在寻找是否使用

append（）

方法的解决方案

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();
});

函数loadJson（）{
$.getJSON（'https://raw.githubusercontent.com/boennemann/animals/master/words.json，函数（数据）{
var s=data[Math.floor（（Math.random（）*data.length））；
对于（i=0；i

在追加之前使用$（'.classname'）.empty（）。。

函数loadJson（）{
$.getJSON（'https://raw.githubusercontent.com/boennemann/animals/master/words.json，函数（数据）{
var s=data[Math.floor（（Math.random（）*data.length））；
$（'.wrapper'）.empty（）；
对于（i=0；i

在循环前调用

$（'.wrapper'）.empty（）

。使用

.html（）

而不是

.append（）

Aa。empty（）方法有效@马克斯

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();
});