javascript - 刷新 append 元素而不重新加载整个页面

Question

我从 json 文件中随机获取动物，并将字母拆分为一个范围，然后将其 append 到 .wrapper div。

但是当我重新加载 json 时，新的动物会 append 到那里，而旧的动物不会消失。

如何使用 html() 方法分割字母，或者如何在不刷新整个页面的情况下重新加载特定的 div？

单击刷新按钮，您会看到新的动物名称 append 到 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

在追加之前使用 $('.classname').empty() 。 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();
});