使用 jquery 将数据附加到 div

debugcn 发表于 Dev

lowyat2017

我可以知道如何使用 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>

纳迪尔·拉斯卡尔

这是一个显示用例的片段

片段

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);
          }
 });

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。