jQuery how to swap each instance of "&" append <span> tag to each element
<p>Like the title says, </p>

<p>I want to be able to, on page load, search through the text located inside <code>#wrapper</code>.</p>

<p>If there is a "<code>&amp;</code>" I want it to have a <code>span</code> tag applied to it and a class appended to that <code>span</code>.
Ie: 
if it finds "<code>hello &amp; Welcome</code>" 
it should end up like "<code>hello &lt;span class="amp"&gt;&amp;&lt;/span&gt; Welcome</code>".</p>

<p>I did have some code Ive been trying but all didn't work, so pointless to include it.
Any help would be great guys thanks.</p>

<p><strong>EDIT:</strong> have been working with </p>

<pre><code>&lt;script type="text/javascript"&gt;  
    $(document).ready(function() { 
     $("#wrapper").html( $("#wrapper").html().replace(/&amp;amp;/g, '&lt;span class="amp"&gt;&amp;amp;&lt;"+"/span&gt;') ); 
    }); 
&lt;/script&gt;
</code></pre>

<p>this loads with an Error in firebug telling me it isn't a function:</p>

<p>$ is not a function
$(document).ready(function() { </p>

<p><strong>Edit:</strong> oops forgot to include my reference to jQuery..</p>

<p>this works.</p>

<pre><code>&lt;script type="text/javascript"&gt;  
    $(document).ready(function() { 
       $("#wrapper").html( $("#wrapper").html().replace(/&amp;amp;/g, '&lt;span class="amp"&gt;&amp;amp;&lt;"+"/span&gt;') ); 
    }); 
&lt;/script&gt;
</code></pre>
