In order to construct HTML from a jQuery ajax response, I prefer not to nest unsightly strings in javascript and avoid using templating scripts like mustache. Instead, I decided to utilize a template HTML with display: none as shown below:
<div id="message-template" class="message-tile" style="display: none;">
<div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
<div class="message-data">
<div class="message-info">
<div class="sender-name">
<a href="{{person-url}}">{{person-name}}</a>
</div>
<div class="posted-to">
To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
</div>
</div>
<div>{{message-body}}</div>
</div>
</div>
My goal is to replace the strings between {{ }} with the actual values obtained from the JSON object. Consider the following function that is invoked during the onSuccess event of the jQuery.ajax:
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);
}
I introduced the replaceString method, but is there an alternative approach? Or would I need to iterate through each child element using find()?