JQuery fails to render to page, but no errors
<p>I'm using JQuery to modify and replace the following HTML</p>

<pre><code>&lt;div class="weather-feed"&gt;
    &lt;img src="http://l.yimg.com/a/i/us/we/52/32.gif"/&gt;&lt;br /&gt;
    &lt;b&gt;Current Conditions:&lt;/b&gt;&lt;br /&gt;
    Sunny, 17 C&lt;BR /&gt;
    &lt;BR /&gt;&lt;b&gt;Forecast:&lt;/b&gt;&lt;BR /&gt;
    Wed - Mostly Sunny. High: 27 Low: 14&lt;br /&gt;
    Thu - Mostly Sunny. High: 25 Low: 14&lt;br /&gt;
    Fri - Partly Cloudy. High: 26 Low: 15&lt;br /&gt;
    Sat - Partly Cloudy. High: 27 Low: 17&lt;br /&gt;
    Sun - Partly Cloudy. High: 28 Low: 17&lt;br /&gt;
    &lt;br /&gt;
    &lt;a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html"&gt;Full Forecast at Yahoo! Weather&lt;/a&gt;&lt;BR/&gt;&lt;BR/&gt;
    (provided by &lt;a href="http://www.weather.com" &gt;The Weather Channel&lt;/a&gt;)&lt;br/&gt;
&lt;/div&gt;
</code></pre>

<p>This code is retrieved onto the page (into the div specifically) through a PHP Session. The div is just there to help with selection (and styling later on).</p>

<p>Because a lot of this HTML doesn't have any identifiable containers, I'm using regex to isolate certain text (such as the weather conditions and forecast):</p>

<pre><code>$(document).ready(function() {
    var src = $(".weather-feed");

    // remove line feeds
    src.find("br").remove();

    // get weather conditions    
    var result = "&lt;div class=\"weather-conditions\"&gt;";
    result += src.html().match(/&lt;\/b&gt;([^&lt;]*)&lt;b&gt;/)[1].trim();
    result += "&lt;/div&gt;";

    // get weather icon
    result += "&lt;div class=\"weather-icon\"&gt;&lt;img src=\"" + src.find("img").attr("src") + "\" /&gt;&lt;span&gt;&lt;?php echo($city); ?&gt;&lt;/span&gt;&lt;/div&gt;";

    // more button
    result += "&lt;div class=\"weather-more-button\"&gt;+&lt;/div&gt;";

    // get weather forecast
    result += "&lt;div class=\"weather-extra\"&gt;";
    result += "&lt;div class=\"weather-forecast\"&gt;";
    result += src.html().match(/&lt;\/b&gt;([^&lt;]*)&lt;a/)[1].trim().replace("\n", "&lt;br /&gt;");
    result += "&lt;/div&gt;"; 

    // get addition forecast link
    result += "&lt;div class=\"weather-detail\"&gt;";
    result += $("&lt;div/&gt;").html(src.find('a').first()).html();
    result += "&lt;/div&gt;&lt;/div&gt;";

    console.log(result);

    // write new code to page           
    src.empty();
    src.append(result);
});
</code></pre>

<p>Unfortunately, while the jquery produces no errors and logs <code>result</code> correctly (see below) to the console, the new code isn't rendered to the page. All I'm seeing there is still the original code returned by the PHP.</p>

<pre><code>&lt;div class="weather-conditions"&gt;
    Sunny, 17 C
&lt;/div&gt;
&lt;div class="weather-icon"&gt;
    &lt;img src="http://l.yimg.com/a/i/us/we/52/32.gif" /&gt;
    &lt;span&gt;Pretoria&lt;/span&gt;
&lt;/div&gt;
&lt;div class="weather-more-button"&gt;+&lt;/div&gt;
&lt;div class="weather-extra"&gt;
    &lt;div class="weather-forecast"&gt;
        Wed - Mostly Sunny. High: 27 Low: 14&lt;br /&gt;
        Thu - Mostly Sunny. High: 25 Low: 14
        Fri - Partly Cloudy. High: 26 Low: 15
        Sat - Partly Cloudy. High: 27 Low: 17
        Sun - Partly Cloudy. High: 28 Low: 17
    &lt;/div&gt;
    &lt;div class="weather-detail"&gt;
        &lt;a href="http://us.rd.yahoo.com/dailynews/rss/weather/Pretoria__SF/*http://weather.yahoo.com/forecast/SFXX0044_c.html"&gt;Full Forecast at Yahoo! Weather&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Additionally (and I think there's a good chance it's related), the replacement of <code>\n</code> with <code>&lt;br /&gt;</code> under the weather forecast section isn't working for more than the 1st match and I'm at a loss as to why that is.</p>

<p>If anyone can assist here in any way, I'd really appreciate it.</p>

<p>Here's a Fiddle so you can see what's going on: <a href="http://jsfiddle.net/4UyAj/" rel="nofollow">http://jsfiddle.net/4UyAj/</a></p>
