Jquery a cleaner way for prepend

Question

I recently made a wall similar to Facebook.

And I just need some advice or a better way.

So when the user submitted his post, I prepend the results to a div, and I made it this way

$('.get_posts').prepend('<div id="'+stream.sid+'"class="row stream-posts"><div class="span1 stream-thumb"><ul class="thumbnails"><li><a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a></li></ul></div><div class="span5 stream-content"><a href="#" class="author">'+stream.author+'</a><p>'+stream.text+'</p></div></div>');

I know its not the best, and would like to ask a more experienced developer if there is a cleaner way to prepend the data.

Answer 1

one option can be creating a html document and using load() method:

Load data from the server and place the returned HTML into the matched element.

markup.html:

    <div class="span1 stream-thumb">
      <ul class="thumbnails">
         <li>
           <a href="#" class="thumbnail"><img src="http://placehold.it/60x60" alt=""></a>
         </li>
      </ul>
     </div>
     <div class="span5 stream-content">
        <a href="#" class="author"></a>
        <p></p>
     </div>

$('.get_posts').prepend('<div id="'+stream.sid+'" class="row stream-posts"></div>');
$("#" + stream.sid).load('markup.html', function(){
   $(this).find('a:last').text(stream.author);
   $(this).find('p:last').text(stream.text)
})