为什么我的Ajax函数无法在目标div元素上附加html？

Question

I am submitting a html form through AJAX and then appending results at particular div element.The corresponding ajax is :-

$(document).ready(function(){
$('.commentbutton').click(function(){
    var idb=$(this).attr('id');
    var formid=$('#Comment'+idb);
    datab=getFormData(formid);
    $.ajax({
        type:"POST",
        url:'/submit/channelcomment',
        data:datab,
        success:function(data){
          console.log(data.content);
          console.log(data.profile);
          var html="<div class='CommentRow'><a href='/Channel/"+data.profile+"/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>"+data.profile+"</a>"+data.content+"</div>"
          console.log('Done');
          idt=$('#CommentBody'+idb);
          console.log(idt);
          idt.append(html);
        },

    }),
    event.preventDefault();
});
  });
  function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};

    $.map(unindexed_array, function(n, i){
    indexed_array[n['name']] = n['value'];
    });

return indexed_array;
}

The desired position at which i'm trying to append html is as follows:-

<div class="CommentBody" id="CommentBody{{c.id}}">
</div>

Here c.id and idb equals to 1.But it is not appending html.

Answer 1

When you say

But it is not appending html.

What is actual behavior?

I tried the dummy code as below and it is working fine.

 $(document).ready(function() { $('.commentbutton').click(function() { var html = "<div class='CommentRow'><a href='/Channel/data.profile/'style='font-weight: bolder;margin-right: 10px;display: inline-block;'>data.profile</a>data.content</div>" var idb = '1'; idt = $('#CommentBody' + idb); alert(idt); idt.append(html); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class='commentbutton'>Comment</button> <div class="CommentBody" id="CommentBody1"> </div>