title: jquery get span value
body: <p>I'm struggling to get the value of a span tag and then pass the value into the input field on click.</p>
  
  <pre><code>$( document ).ready(function() {
  
      $( "input" ).on( "click", function() {
          $( ".kb" ).toggle();
      });
  
      $( ".kb .row span" ).on( "click", function() {
          var key = $('this').text();
          alert(key)
          $("body").find("input").append(key);
  
      });
  
  });
  
  
  &lt;input type="text" /&gt;
  
  &lt;div class="kb"&gt;
    &lt;div class="row"&gt;
      &lt;span&gt;q&lt;/span&gt;
      &lt;span&gt;w&lt;/span&gt;
      &lt;span&gt;e&lt;/span&gt;
      &lt;span&gt;r&lt;/span&gt;
      &lt;span&gt;t&lt;/span&gt;
      &lt;span&gt;y&lt;/span&gt;
      &lt;span&gt;u&lt;/span&gt;
      &lt;span&gt;i&lt;/span&gt;
      &lt;span&gt;o&lt;/span&gt;
      &lt;span&gt;p&lt;/span&gt;
      &lt;span&gt;[&lt;/span&gt;
      &lt;span&gt;]&lt;/span&gt;    
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;span&gt;a&lt;/span&gt;
      &lt;span&gt;s&lt;/span&gt;
      &lt;span&gt;d&lt;/span&gt;
      &lt;span&gt;f&lt;/span&gt;
      &lt;span&gt;g&lt;/span&gt;
      &lt;span&gt;h&lt;/span&gt;
      &lt;span&gt;j&lt;/span&gt;
      &lt;span&gt;k&lt;/span&gt;
      &lt;span&gt;l&lt;/span&gt;
      &lt;span&gt;;&lt;/span&gt;
      &lt;span&gt;'&lt;/span&gt;
    &lt;/div&gt;  
  
  
    &lt;div class="row"&gt;
      &lt;span&gt;z&lt;/span&gt;
      &lt;span&gt;x&lt;/span&gt;
      &lt;span&gt;c&lt;/span&gt;
      &lt;span&gt;v&lt;/span&gt;
      &lt;span&gt;b&lt;/span&gt;
      &lt;span&gt;n&lt;/span&gt;
      &lt;span&gt;m&lt;/span&gt;
      &lt;span&gt;,&lt;/span&gt;
      &lt;span&gt;.&lt;/span&gt;
      &lt;span&gt;/&lt;/span&gt;
    &lt;/div&gt;  
  </code></pre>