使用jQuery將數據追加到div

Question

我能知道如何使用每行的jquery將標題和消息附加到div嗎？ 我的代碼的問題是每個數據都沒有顯示在一行中。

<!--
    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

這是顯示用例的代碼片段

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> 

你可以在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

在我看來，如果您正在處理記錄集合，那么標記將無法很好地工作。 您最終可能會遇到的事情是...

<!-- Title1
     Title2
     Message1
     Message2 -->

稍微更改代碼，以便可以為每個記錄添加標記：

 $.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>");
     }
 });