Question

我随机从json文件中获取动物并将字母分成跨度并将其附加到.wrapper div。

但是当我重新加载json时，新动物会附加在那里，旧动物不会消失。

如何使用html()方法拆分字母，或者如何在不刷新整个页面的情况下重新加载特定的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();
});

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

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

1 个答案: