jQuery doesn't properly update contents of the span tag
<p>here's the example: <a href="http://jsbin.com/izegoy" rel="nofollow">http://jsbin.com/izegoy</a><br>
problem: <a href="http://i.imgur.com/h1T98.png" rel="nofollow">http://i.imgur.com/h1T98.png</a></p>

<p>script:</p>

<pre><code>$(document).ready(function(){
    $("p:eq(1)").hide().after("&lt;span&gt;View more&lt;/span&gt;");
    $("span").click(function(){
        $("p:eq(1)").slideToggle(200,function(){
            if($("span").text()=="View more"){
                $("span").text("View less");
        }   else{
                $("span").text("View more");
        }
        });
    });
});
</code></pre>

<p>html:</p>

<pre><code>    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.&lt;/p&gt;
</code></pre>

<p>When I update contents of the span tag, it creates the new text outside of the original span tag. It's not noticeable on the page, but only when you look at the generated source code. I have no idea, what I do wrong.</p>

<p>Thank you for your time</p>
