title: jQuery .replaceWith Not Working
body: <p>Google Blogger uses javascript to place a quickedit icon for the admin on widgets or editable areas.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;a class="quickedit" href="xxxxxx" onclick="return _WidgetManager._PopupConfig(document.getElementById(&amp;quot;BlogArchive1&amp;quot;));" target="configBlogArchive1" title="Edit"&gt;
  &lt;img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18"&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>I'm trying to replace that image with a Font Awesome Icon. Here is the jQuery that I used:</p>
  
  <pre><code>$('a.quickedit img').replaceWith('&lt;i class="icon-wrench"&gt;&lt;/i&gt;');
  </code></pre>
  
  <p>The original image is still there, there are no related errors in the console.log, so why is it not working? BTW, I am using the <code>$(document).ready</code> function, and version 1.7.1.</p>
  
  <p><strong>EDIT:</strong> I also noticed that using this breaks all of my other jQuery scripts on the page. So there may be a conflict.</p>
  
  <p>Here is everything without the script I'm trying to add:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
    $(document).ready(function() {
      $(&amp;quot;.menu-toggle&amp;quot;).click(function (e) {
          $(this).next(&amp;#39;ul&amp;#39;).slideToggle(&amp;quot;fast&amp;quot;);
      });
      $(&amp;quot;#LinkList1 ul li&amp;quot;).click(function (e) {
          $(this).find(&amp;#39;ul&amp;#39;).slideToggle(&amp;quot;fast&amp;quot;);
      });
      $(&amp;quot;body a, .camera_prev, .camera_next, .camera_pag li&amp;quot;).hover(function(){
          link_audio.play();
      },
      function(){
          link_audio.load();
      });
      $(window).scroll(function(){
          if ($(this).scrollTop() &amp;gt; 100) {
              $(&amp;#39;.scrollup&amp;#39;).fadeIn();
          } 
          else {
              $(&amp;#39;.scrollup&amp;#39;).fadeOut();
          }
      }); 
      $(&amp;#39;.scrollup&amp;#39;).click(function(){
          $(&amp;quot;html, body&amp;quot;).animate({ scrollTop: 0 }, 600);
          return false;
      });
    });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT AGAIN</strong>: No matter what I try, it seems all other scripts break and no longer function with no visual errors or errors in the console.log. View the template/site in question here: <a href="http://xarpixels-revitalize-template.blogspot.com/" rel="nofollow">http://xarpixels-revitalize-template.blogspot.com/</a></p>
  
  <p>FYI, only the admin can even see the .quickedit icon.</p>