title: How can I modify html from an ajax call before adding it into document?
body: <p>I'm performing an ajax call to grab an HTML page from the server;  ajax call looks like this:</p>
  
  <pre><code>function loadHtml() {
      $.ajax({
            type          :  'GET',
            async         :  false,
            url           :  'my.html',
            contentType   :  'text/html',
            dataType      :  'html',
            success       :  function(data) {
                loadedHtml = data; // the loadedHtml variable is global
            }
      });
  }
  </code></pre>
  
  <p>Later, I'd like to display this html after modifying it somewhat.  </p>
  
  <hr>
  
  <h2>Attempt 1</h2>
  
  <p>I tried this, but the resulting screen shows nothing at all (body contains no html).</p>
  
  <pre><code>var myContent = $(loadedHtml).find('#test1').text("Modified!");
  $('body').html(myContent);
  </code></pre>
  
  <hr>
  
  <h2>Attempt 2</h2>
  
  <p>I also tried this, but the resulting screen just shows the original content of <code>loadedHtml</code>.</p>
  
  <pre><code>var myContent = $(loadedHtml);
  myContent.find('#test1').text("Modified!");
  $('body').html(myContent);
  </code></pre>
  
  <hr>
  
  <h2>Original Html</h2>
  
  <p>Here's the original content of <code>loadedHtml</code> from <code>my.html</code></p>
  
  <pre><code>&lt;div id="test1" style="color: white;"&gt; Working! &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>What am I doing wrong?</p>
  
  <hr>
  
  <h2>UPDATES</h2>
  
  <ol>
  <li>This is a simple example I'm trying to get to work before adding the complexity of what I really need to be doing.  So, using a simple string replace on the <code>loadedHtml</code> variable before inserting it into the DOM is not something that will work for me.</li>
  <li>I've updated my code to show the ajax call is synchronous.  the <code>loadedHtml</code> variable does in fact contain the html from the server by the time I get to the point I'm trying to modify it.</li>
  </ol>