Funktioniert jquery append-Funktion, um den Inhalt irgendwie zu duplizieren?

Question

In this Beispiel lade ich JSON-Daten von Reddit mit Ajax. Da die Antwort vom Server kommt, füge ich sie an div mit einer Klasse .text an.

<button type="button" class="btn">Click me!</button> 
<div class="text">Replace me!!</div> 

$(".btn").click(function() { 
    $.ajax({ 
     url: "http://www.reddit.com/r/aww/search.json?q=puppy&restrict_sr=true", 
     method: "GET", 
     success: function (result) { 
      $(".text").text(""); 
      for (var i = 0; i < result.data.children.length; i++) { 
       $(".text").append('<img src="' + result.data.children[i].data.thumbnail + '"/>'); 
      } 
     } 
    }); 
}); 

Dies funktioniert. Meine Frage ist, warum hängt Append-Funktion nicht die gleichen Bilder wieder an, wie ich Knopf wiederholt drücke? Append-Funktion vermeiden Sie den Inhalt irgendwie duplizieren?

Answer 1

, das ist, weil Sie dies tun:

$(".text").text(""); 

Wenn Sie das tun, dass es die div leert jedes Mal, wenn Sie auf die Schaltfläche klicken.

Answer 2

Sie haben das Element jedes Mal gelöscht, indem Sie auf $ (". Text") geklickt haben. Text (""); Wenn Sie ein Element wie ich hinzufügen, können Sie den Text durch nichts ersetzen und die Elemente in einem neuen Div anzeigen.

Wenn Sie Ihren Code so verwenden, wird der Text weg sein und die Bilder werden da sein.

HTML:

<button type="button" class="btn">Click me!</button> 
    <div class="text">Replace me!!</div> 
    <div class="images"> </div> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 

JS

// Attach a button listener to the button 
// 
    $(".btn").click(function(){ 
    $.ajax({ 
     url: "http://www.reddit.com/r/aww/search.json?q=puppy&restrict_sr=true", 
     method: "GET", 
     success: function(result){ 
     $('.text').html('') 

     for(var i=0; i < result.data.children.length ; i++){ 
      $(".images").append('<img src="' + result.data.children[i].data.thumbnail + '"/>'); 
     } 
     }