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

Refresh appended element without reloading the whole page

本文关键字：加载 新加载 元素 刷新      更新时间：2023-09-26

我从json文件中随机获得动物，并将字母拆分为span并将其附加为.wrapperdiv。

但是当我重新加载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();
});

使用$('.classname').empty() before append..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();
});
相关文章：