title: jquery val() will not display value
body: <h2>html() should be used for setting content in non-form elements such as div's. ** this question has been answered a few times, which I was unaware of.</h2>
  
  <p>I am trying to set a value after retrieving comments from a $.ajax call. When I alert out the values of commentOutput and commentSpan, they are showing the correct data. However, when I try to set the value from those comments in a span, they do not show up, not do they appear in the generated source.</p>
  
  <p>Here is the javascript. You can see the return from the POST in your console. You can also see the value it is grabbing for the span, as I have alerted it onclick.</p>
  
  <p>To invoke this, just click the first picture of the cat, none of the others have comments at this point.</p>
  
  <pre><code>var ajaxOptions = {
      type: 'POST',
      dataType: 'json',
      url: 'ajax/comments.php',
      data: { id: photoID, action: 'GetComments' },
      success: function(data) {
  
              for(i=0; i&lt;data.length; i++) {
  
                      var commentOutput = '&lt;div&gt;&lt;h4&gt;'+data[i].comment_user+' says:&lt;/h4&gt;';
                      commentOutput += '&lt;span&gt;'+data[i].comment_msg+'&lt;/span&gt;';
                      commentOutput += '&lt;/div&gt;';
                      var commentSpan = '#photo' + data[i].photo_id + ' .comments';
                      $(commentSpan).val(commentOutput);
                      $(commentSpan).delay('200').css('display','block');
              }
  
      }
  };
  </code></pre>
  
  <p>Any help would be greatly appreciated,</p>
  
  <p>Cheers,</p>
  
  <p>Cody</p>