Replace text from jquery loaded external html file

Question

I used this code to load content from another html file:

<script> 
    $(function(){
      $("#includedContent").load("reslist.html"); 
    });
</script>


<div id="includedContent"></div>

The reslist.html contents this script:

<div id="sub-menu-column" align="left"><h2>
     Smith Residence<br />
     Smith Pool<br />
     Fis Residence<br />
     Res Residence
</h2></div>

It loads correctly into my page. But now: How do I replace a string from loaded content? Because I want to load the text "Smith Residence" in a red colored font.

Answer 1

Using the .load() callback function, this will replace the text in question with a span containing the text, that you can then alter using css...

Javascript

$(function(){
    $("#includedContent").load("reslist.html", function() {
        $(this).html($(this).html().replace("Smith Residence", "<span class='red'>Smith Residence</span>"));
    }); 
});

CSS

.red {
    color: red;
}