jQuery doesn't properly update contents of the span tag -

here's example: http://jsbin.com/izegoy
problem: http://i.imgur.com/h1t98.png

script:

$(document).ready(function(){     $("p:eq(1)").hide().after("<span>view more</span>");     $("span").click(function(){         $("p:eq(1)").slidetoggle(200,function(){             if($("span").text()=="view more"){                 $("span").text("view less");         }   else{                 $("span").text("view more");         }         });     }); }); 

html:

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>     <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 

when update contents of span tag, creates new text outside of original span tag. it's not noticeable on page, when @ generated source code. have no idea, wrong.

thank time

that should work fine. try using html(); method instead:

$("span").html("view less");