How to display this div when success send post value using ajax?

Question

How can I display the following div, after the success of an AJAX post?

I want to display this

<div class="love" id="love_0" style="border-radius: 3px; padding: 8px; border: 1px solid #ccc; right: 13px; background: #fff; top: 13px;">
    <a class="like" style="cursor: pointer;" id="876876">
        <img src="dislove.png" style="border: none;" />
    </a>            
</div>

I have tried the following code, but it isn't working. The div class="love" above is not showing.

$('body').on('click','.like',function() {   
    var uid = $(this).attr('id');       
    var postData = 'uid='+uid;
    $.ajax({        
        type: "POST",
        url: "xxxxxx.php",
        data: postData,
        cache: false,
        success: function() {           
            $('#'+uid).html('<img src="dislove.png" style=" border: none;" >')
                      .addClass('unlike')
                      .removeClass('like');
            $('#you'+uid).text('');
        }       
    });
})

Answer 1

In ajax success function you just need to append the div you want to its container (for ex body)

success: function(){            
   $('#'+uid).html('<img src="dislove.png" style=" border: none;">').addClass('unlike').removeClass('like');
   $('#you'+uid).text('');
   $('body').append('<div class="love" id="love_0" style=" border-radius: 3px; padding: 8px;  border: 1px solid #ccc; right: 13px; background: #fff; top: 13px; "><a class="like" style=" cursor: pointer; " id="876876"><img src="dislove.png" style=" border: none;"></a>            </div>')
}