Javascript 为什么我的ajax函数不能在目标div元素上附加html？

我通过AJAX提交html表单，然后将结果附加到特定的div元素。相应的AJAX是：-

$(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;
}

$（文档）.ready（函数（）{
$（'.commentbutton'）。单击（函数（）{
var idb=$（this.attr（'id'）；
var formid=$（'注释'+idb）；
datab=getFormData（formid）；
$.ajax({
类型：“POST”，
url:“/submit/channelcomment”，
数据：data，
成功：功能（数据）{
console.log（data.content）；
console.log（data.profile）；
var html=”“+数据内容+“”
console.log（'Done'）；
idt=$（“#评论体”+idb）；
控制台日志（idt）；
idt.append（html）；
},
}),
event.preventDefault（）；
});
});
函数getFormData（$form）{
var unindex_array=$form.serializedArray（）；
变量索引_数组={}；
$.map（未索引的数组，函数（n，i）{
索引_数组[n['name']=n['value']；
});
返回索引数组；
}

我尝试附加html所需的位置如下：-

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

这里c.id和idb等于1。但它不是附加html

当你说

但它并没有附加html

什么是实际行为

我尝试了下面的伪代码，它工作得很好

$（文档）.ready（函数（）{
$（'.commentbutton'）。单击（函数（）{
var html=“data.content”
var idb='1'；
idt=$（“#评论体”+idb）；
警报（idt）；
idt.append（html）；
});
});

评论
此处data.content是服务器通过ajax返回的json响应。但我不认为你的html会显示这种反应。相反，它将显示“data.content”而不是“data.contentRight”的值。我刚刚在答案中添加了伪占位符值，以显示它是附加到的。您始终可以用实际数据替换伪数据。