jquery append関数は何らかの形でコンテンツの複製を避けますか？

Question

thisの例では、ajaxを使用してredditからJSONデータをロードしています。応答はサーバーから来るので、クラス.textでdivに追加します。

<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 + '"/>'); 
      } 
     } 
    }); 
}); 

これは動作します。私の質問は、私は何度もボタンを押すと、同じ画像を再び追加しない関数を追加するのですか？ append関数は何らかの形でコンテンツを複製しませんか？あなたはそれが毎回のdivを空にすることを行うと

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

ボタンをクリックしてください：あなたがこれを行うためだ

Answer 1

。

Answer 2

$（ "。text"）のためにクリックすると、毎回要素が削除されました。 もしあなたが私のように要素を追加すると、テキストを何も置き換えずに新しいdivにその要素を表示することができます。

このようなコードを使用すると、テキストが消えて写真が表示されます。

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 + '"/>'); 
     } 
     }