title: Replacing an element and returning the new one in jQuery
body: <p>How do you replace an element in jQuery and have the replacement element returned instead of the element that was removed?</p>
  
  <p>I have the following scenario. I have many checkboxes and once you click one of them, that checkbox is replaced by a loading icon. Once some AJAX stuff happens, the loading icon is replaced by a tick icon.</p>
  
  <p>Using jQuery's <a href="http://docs.jquery.com/Manipulation/replaceWith" rel="noreferrer"><code>replaceWith</code></a>, you'd do something like:</p>
  
  <pre><code>$("input[type='checkbox']").click(function() {
  
    $(this).replaceWith("&lt;img src='loading.jpg' alt='loading'/&gt;");
    $.post("somepage.php");
    $(this).replaceWith("&lt;img src='tick.jpg' alt='done'/&gt;"); 
  
  });
  </code></pre>
  
  <p>However, this doesn't work because <code>replaceWith</code> returns the element that was removed, not the one which was added. So after the AJAX stuff completes, <code>loading.jpg</code> will just stay there forever.</p>
  
  <p>Is there some way I can return the replacement element without selecting it?</p>
  
  <p>Thanks in advance.</p>