title: How can I change icon on AJax response?
body: <p>I have an anchor tag with an icon inside that I want to change it on click.
  So, using Ajax I tried as below:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;a id="#pl-esong234" class="social-button-song" title="Add in playlist" onclick="addInPlaylistSongs(234, 1)"&gt;
    &lt;i class="ion-plus all-btn-icon"&gt;&lt;/i&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function addInPlaylistSongs(track, id) {
      $.ajax({
          type: "POST",
          url: baseUrl+"/requests/manage_playlists.php",
          data: "id="+track+"&amp;playlist="+id+"&amp;type=4&amp;token_id="+token_id, 
          cache: false,
          success: function(html) {
              $('#pl-esong'+track).append('&lt;i class="ion-checkmark all-btn-icon"&gt;&lt;/i&gt;');
          }
      });
  }
  </code></pre>
  
  <p>I tried also:</p>
  
  <pre><code>//2nd try
  $('#pl-esong'+track+' i').after('&lt;i class="ion-checkmark all-btn-icon"&gt;&lt;/i&gt;').remove();
  
  //3rd try
  $('#pl-esong'+track+' i').after(html).remove();
  
  //4th try
  $('#pl-esong'+track+' i').replaceWith(html);
  </code></pre>
  
  <p>I tried to console log on success and everything is correct, the html response is <code>&lt;i class="ion-checkmark all-btn-icon"&gt;&lt;/i&gt;</code> and the select item is <code>#pl-esong234</code>. </p>
  
  <p>Why I'm not able to change the icon inside my anchor element?</p>