title: Using .text() jquery to display text within a span
body: <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="hel"&gt;&lt;/div&gt;
  &lt;script&gt;
  txt="&lt;script&gt;alert('Test');&lt;/script&gt;";
  var headerIcon = '&lt;div&gt;hi&lt;/div&gt;';
  var messageBox = $("&lt;div class='textDiv'&gt;&lt;span class='sp'&gt;&lt;/span&gt;&lt;/div&gt;");
  
  $(document).ready(function(){
  messageBox.text(txt);
  //$(".textDiv .sp").text(txt);
  $('#hel').append(headerIcon,messageBox);
  
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The output is </p>
  
  <pre><code>hi
  &lt;script&gt;alert("Test");&lt;/script&gt;
  </code></pre>
  
  <p>But if I use $(".textDiv .sp").text(txt); instead of messageBox.text(txt); the output is only 
  hi
  What is going wrong when i use $(".textDiv .sp").text(txt);?</p>
  
  <p>Edit : I dont want to inject html.I want to display as text only. But i just want to know why messageBox.text(txt); works but $(".textDiv .sp").text(txt); doesnt</p>