DOM cloning in a loop I'm cloning a fairly complex div/ page and changing various things in it before appending it to the DOM.  The current method seems long-winded, and I was hoping if there was a simpler way of doing it?

$.each(results.jobs, function(i, result){

var theID = result.id,
theTitle = result.title,
theDescription = result.description,
theLocation = result.location,
theType = result.type,
thePosted = posted[2]+'-'+posted[1]+'-'+posted[0],
theAgency = result.company,
theRef = result.reference,
theSalary = '',
theApps = result.number_of_applications,
hasApplied = result.applied,
theFeatured = result.featured,
theJobNo = pages*i +1;

if(result.hasOwnProperty('salary')){
    var theSalary = result.salary.information.replace(/Â/g, '');
}

var jobContainer = $('#job-container').clone(true, true).attr('data-jobno', theJobNo);

jobContainer.find('h1').text(theTitle);
jobContainer.find('#job-location').text(theLocation);
jobContainer.find('#job-type').text(theType);
jobContainer.find('#job-date').text(thePosted);
jobContainer.find('#job-agency').text(theAgency);
jobContainer.find('#job-description').html(theDescription.replace(/Â£/gi, '&amp;pound;'));
jobContainer.find('#job-ref').text(theRef);
jobContainer.find('#job-id').text(theID);
jobContainer.find('.apply-btn, .email-btn, .save-btn').attr('id', theID);
jobContainer.find('.save-btn').text('Save Job').removeClass('job-saved');

if(localStorage["saved"]!=null &amp;&amp; localStorage["saved"]!= '[]'){
    if(localStorage["saved"].indexOf(theID)&gt;= 0){
        jobContainer.find('.save-btn').addClass('job-saved').text('Job Saved');
    }
}

if(theFeatured === '1'){
    jobContainer.find('#job-featured').show();
}else{
    jobContainer.find('#job-featured').hide();
}

if(localStorage["applied"]!=null &amp;&amp; localStorage["applied"]!= '[]'){
    if(localStorage["applied"].indexOf(theID)&gt;= 0){
        jobContainer.find('.job-alert').show();
    }
}

if(theSalary != null){
    jobContainer.find('#job-row-salary').show();
    jobContainer.find('#job-salary').text(theSalary);
}else{
    jobContainer.find('#job-row-salary').hide();
}

if(theApps === '0'){
    jobContainer.find('#job-apps').html('&lt;span style="color:#219a00"&gt;Be first to apply!&lt;/span&gt;');
}else{
    jobContainer.find('#job-apps').html(theApps);
}

viewJobList.push(jobContainer)

});

$('#slider').html('').append(viewJobList)


This is inside an Ajax success function which is made to an API. I'm cloning an existing page in the HTML and adding new information, adding it to an array/ list then appending to the DOM just the once.
This seems a textbook case for using Angular.

Assuming you do not have the time to invest in Angular, you could consider the following:
If you named all your divs after your result properties ( for example '#job-agency' -> #job-company ), then you would have to do far less extraction work and far fewer text() calls.

You could do something like: 

$.each(results.jobs, function(i, result){

  var key;

  //Enhance your result object with some calculated values
  result.thePosted = posted[2]+'-'+posted[1]+'-'+posted[0];
  result.theJobNo = pages*i +1,

if(result.hasOwnProperty('salary')){
  result.theSalary = result.salary.information.replace(/Â/g, '');
}

var jobContainer = $('#job-container').clone(true, true).attr('data-jobno', theJobNo);

for( key in result )
{
  jobContainer.find( '#job-' + key ).text( result[key] );
}

jobContainer.find('.apply-btn, .email-btn, .save-btn').attr('id', theID);
jobContainer.find('.save-btn').text('Save Job').removeClass('job-saved');


etc. etc.

The rest of the code is ok once you apply consistent indenting.