Append data to div using jquery

Question

Can I know how can we append the title and message to the div using jquery for every row? The issue with my code is that each of the data is not being displayed in a row.

<!--
    For instance: Title1
                  Message1 
                  Title2
                  Message2   -->

<div class="widget-box">
     <div class="widget-title bg_lo"  data-toggle="collapse" href="#collapseG3" > <span class="icon"> <i class="icon-chevron-down"></i> </span>
        <h5>Topic</h5>
      </div>
      <div id="announcement" class="widget-content nopadding updates collapse in" id="collapseG3">
        <div class="new-update clearfix">
          <div class="update-done"><strong id ="title"><!-- post.title --></strong></a> <span id ="message"><!-- post.message --></span> </div>
        </div>
    </div>
</div>

<script>
     $.ajax({
         url: '/test/back-api/admin/announcements',
         method: 'GET',
         success: function(d){
         if(d.result){
             var posts = d.data;
             for(var i=0; i < posts.length; i++){
             var post = posts[i];
             $('#announcement').append(post.title, post.message);            
             }
         }else{
             $('#announcement').append("<div> </div>");
         }
         }
     });
</script>

Answer 1

Here is a snippet showing the use case

SNIPPET

 var message_container = '<div class="new-update clearfix"><div class="update-done"><strong id ="title"><!-- post.title --></strong></a> <span id ="message"><!-- post.message --></span> </div></div>'; $("#add").on('click',function(){ var message= $(message_container); var post = { title: "<h1>title</h1>", message: "<p>message</p>"}; message.find('#title').append(post.title); message.find('#message').append(post.message); $("#announcement").append(message); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="widget-box"> <div class="widget-title bg_lo" data-toggle="collapse" href="#collapseG3" > <span class="icon"> <i class="icon-chevron-down"></i> </span> <h5>Topic</h5> </div> <div id="announcement" class="widget-content nopadding updates collapse in" id="collapseG3"> </div> </div> <button id="add">Add</button> 

You can do the same thing in ajax

var message_container = '<div class="new-update clearfix"><div class="update-done"><strong id ="title"><!-- post.title --></strong></a> <span id ="message"><!-- post.message --></span> </div></div>';


$.ajax({
      url: '/test/back-api/admin/announcements',
      method: 'GET',
      success: function(d) {
        if (d.result) {
          var posts = d.data;
          for (var i = 0; i < posts.length; i++) {
            var post = posts[i];

            var message = $(message_container);

            message.find('#title').append(post.title);
            message.find('#message').append(post.message);
            $("#announcement").append(message);
          }
 });

Answer 2

Looks to me like your markup isn't going to work very well if you're working with a collection of records. What you're likely to end up with the way you're going is something like...

<!-- Title1
     Title2
     Message1
     Message2 -->

Change your code up a little so that you can add to the markup for each record:

 $.ajax({
     url: '/test/back-api/admin/announcements',
     method: 'GET',
     success: function(d){
     if(d.result){
         var posts = d.data;
         for(var i=0; i < posts.length; i++){
         var post = posts[i];

         var Title = "<div class=\"title\">" + post.title + "</div>";
         var Message = "<div class=\"message\">" + post.message + "</div>";
         $('#announcement').append(Title, Message);
     }else{
         $('#announcement').append("<div> </div>");
     }
 });