title: Dynamically position list item based on ajax
body: <p>I am trying to change the location of the scroll able list item based on whether or not a message was sent by a user or another party. However, what I have will not work.</p>
  
  <p>I tried adding .css('position', 'right')
  and putting in position="right" when the div is called. </p>
  
  <p>What I have got so far is this as far as my ajax is concerned:</p>
  
  <pre><code>    success: function(data)
      {
          var messages = data['serverResponse'];
          //alert(JSON.stringify(threads));
         $.each( messages, function( name, value) {
  
             if(value.user === "1")
             {
                  $(".message").append("&lt;div class='" + name + "'&gt;" + value.name + "&lt;/div&gt;").css(".sentMes");
                  $(".message").append("&lt;div class='" + name + "'&gt;" + value.message + "&lt;/div&gt;");
                  $(".message").append("&lt;div class='" + name + "'&gt;" + value.date + "&lt;/div&gt;");
              } else
              {
                  $(".message").append("&lt;div class='" + name + "'&gt;" + value.name + "&lt;/div&gt;");
                  $(".message").append("&lt;div class='" + name + "'&gt;" + value.message + "&lt;/div&gt;");
                  $(".message").append("&lt;div class='" + name + "'&gt;" + value.date + "&lt;/div&gt;");
              }
       });
  </code></pre>
  
  <p>And for the html:   </p>
  
  <pre><code>  &lt;title&gt;AMessage&lt;/title&gt;
       &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript" src="JavaScript/ThreadsandMessages.js"&gt;     &lt;/script&gt;
     &lt;link rel="stylesheet" type="text/css" href="AMessage.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;header area&lt;/header&gt;
  &lt;nav&gt;
      &lt;ul role="list"&gt;
           &lt;li class="thread" role="listitem"&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;/nav&gt;
  
     &lt;nav&gt;
      &lt;ul role="list"&gt;
          &lt;li class="message" role="listitem"&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/nav&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>