Javascript 当JSON响应更新全局变量时追加div

我正在尝试更新一个.append，其中包含一个从web服务接收数据的动态变量。我得到了数据，但是如何更新保存动态变量的div？我想在我的案例中添加多个案例

这就是我到目前为止所做的：

var dynamic = ""; // global variable

var wishlist = ""; // global variable

$('#QuickAccessContainer').append(''
  + '<div id="settings"></div>'
  + '<div id="GameContainer">'
  + dynamic
  + '</div>'
  + '<div id="GameWishlist">'
  + wishlist 
  + '</div>'
  + '<div id="profile"></div>'
);


$('clickme').on("click", function (){

  $http({
     method: 'Get',
     url: "http://URL" + Userid // get favorite game list of user
        }).success(function (data) {

        var dynamic = ""; // resets the content of dynamic if loaded again

        for (i = 0; i < data.length; i++) {

        dynamic += '<div> data[i].gameName </div>' // generate list of games
     };
  })

});

$('clickmeToo').on("click", function (){

  $http({
     method: 'Get',
     url: "http://URL" + Userid // get wishlist of user
        }).success(function (data) {

        var wishlist = ""; // resets the content of dynamic if loaded again

        for (i = 0; i < data.length; i++) {

        wishlist += '<div> data[i].gameName </div>' // generate list of games
     };
  })

});

var dynamic=”“；//全局变量
var wishlist=“”；//全局变量
$（'#QuickAccessContainer'）。附加（''
+ ''
+ ''
+动态的
+ ''
+ ''
+愿望者
+ ''
+ ''
);
$（'clickme'）。在（'click'，函数（）{
$http({
方法：“Get”，
url:“http://URL“+Userid//获取用户最喜爱的游戏列表
}).成功（功能（数据）{
var dynamic=“；//如果再次加载，则重置动态的内容
对于（i=0；i

问题是，我猜DOM（？）div gamecontainer首先加载并获取变量，当用户单击按钮，json返回收藏夹列表时，我如何才能更新该变量（动态）。我尝试在循环之后添加一个附加的.append，添加方式如下：

      $('#GameContainer').append(''
         + '<div id="GameContainer">'
         + dynamic
         + '</div>');

      }; // end of success

$（'GameContainer'）。附加（'
+ ''
+动态的
+ '');
}; // 成功的终点

---

但是在这种情况下，每次单击.append都会堆叠起来，您可以使用jquery添加和删除元素

var $dynamicElement = $('<div id="GameContainer"></div>'); // global variable

$('#QuickAccessContainer').append($dynamicElement);


$('clickme').on("click", function (){

  $http({
     method: 'Get',
     url: "http://URL" + Userid // get favorite game list of user
        }).success(function (data) {

        $dynamicElement.empty(); // resets the content of dynamic if loaded again

        var divs = '';
        for (var i = 0; i < data.length; i++) {

            divs += '<div>' + data[i].gameName + '</div>' // generate list of games
        };

        //append to dynamic element holder
        $dynamicElement.append($(divs));
  })

});

var$dynamicElement=$（''）；//全局变量
$（'#QuickAccessContainer'）.append（$dynamicElement）；
$（'clickme'）。在（'click'，函数（）{
$http({
方法：“Get”，
url:“http://URL“+Userid//获取用户最喜爱的游戏列表
}).成功（功能（数据）{
$dynamicElement.empty（）；//在再次加载时重置dynamic的内容
var divs=“”；
对于（变量i=0；i

不要使用全局变量

dynamic

，而是使用类似于

appendToQuickAccessContainer

的函数，并将目标

div

的

子项作为字符串传递。然后在函数内部执行dom操作。它更干净、更安全。这是我该怎么做的


函数appendToQuickAccessContainer（子项）{
var$quickAccessContainer=$（“#quickAccessContainer”）；
var$gameContainer；
if（$quickAccessContainer.children（'div#GameContainer'）。长度==0）{
$gameContainer=$quickAccessContainer.append（$（“”）{
id:“游戏容器”
}));
}否则{
$gameContainer=$quickAccessContainer.find（“#gameContainer”）；
}
$gameContainer.append（子项）；
}
$（'.clickme'）。在（“单击”，函数（）上）{
$.ajax({
方法：“GET”，
url:“https://jsonplaceholder.typicode.com/todos/"
}).完成（功能（数据）{
var domString=“”；
对于（i=0；i

点击我
单击另一个
谢谢，这似乎很管用，但如果我还有另一张同样的列表，我该怎么做呢？-我更新了我的问题你的意思是在
GameContainer
div中添加吗？它们似乎只是堆积起来，每次我单击get和additional GamesList时，quickAccesContainer都是添加的，它不会替换，这与我在最后的问题中所做的示例相同。@EwaldBos我更新了代码。对于任何新问题，现在打开一个新问题。编辑问题，然后要求代码调整不是一个好主意。总是为一个新问题问一个新问题。谢谢这也不能让它们堆叠在一起，当我多次单击按钮时，我猜是这样的。追加另一个div而不是只更新动态部分它将动态更新我们正在制作
$dynamicElement.empty（）我试过了，但在$dynamicElement.empty（）行中出现错误“dynamicElement未定义”；我删除了所有文件中的“$”，现在它工作得很好，而且确实更新了。最重要的是，当我点击按钮x次时，没有两倍甚至多倍。很酷，谢谢