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

【问题标题】：Refresh appended element without reloading the whole page刷新附加元素而不重新加载整个页面
【发布时间】：2017-02-04 22:44:10
【问题描述】：

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

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

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

单击刷新按钮，您会看到一个新的动物名称附加在 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();
});

【问题讨论】：

在您的周期前致电$('.wrapper').empty()。
使用.html() 而不是.append()
啊。 empty() 方法有效！ @Maxx

标签： javascript jquery json append

【解决方案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();
});

【讨论】：