title: How to replace strings in jQuery DOM element
body: <p>I need to build HTML from an jQuery ajax response. I don't like nesting ugly strings in javascript and I don't want to use mustache or any other templating script.</p>
  
  <p>So I went for the approach of having a template HTML with display: none like the following:</p>
  
  <pre><code>&lt;div id="message-template" class="message-tile" style="display: none;"&gt;
      &lt;div class="profile-thumb"&gt;&lt;img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /&gt;&lt;/div&gt;
      &lt;div class="message-data"&gt;
          &lt;div class="message-info"&gt;
              &lt;div class="sender-name"&gt;
                  &lt;a href="{{person-url}}"&gt;{{person-name}}&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="posted-to"&gt;
                  To &lt;a href="{{posted-to-url}}"&gt;{{posted-to-title}}&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;{{message-body}}&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to replace the strings between {{ }} with the actual values from the json object.
  Suppose this is the function that gets called on the jQuery.ajax onSuccess event:</p>
  
  <pre><code>function createNewElement(jsonObj) {
      var $clone = $('#message-template').clone();
      $clone.replaceString("{{person-name}}", jsonObj.personName);
      $clone.replaceString("{{thumb-url}}", jsonObj.thumbUrl);
      $clone.replaceString("{{person-url}}", jsonObj.personUrl);
      // etc
      $("#target-container").append($clone);
  }
  </code></pre>
  
  <p>I invented the replaceString method, but is there something similar? Or do I need to traverse through each element child using find() ?</p>