Javascript 如何使jQuery数组覆盖整个空间

我有一个js文件，其中我从JSON接收数据。我使用jquery的每个方法来迭代JSON数据。现在，我显示了6-7行代码和从JSON数据接收到的1个用户的图像。现在我做的是我创建了一个标记，我在其中写了一些信息来检查它在哪里显示，它在我的数据上。现在我想要的是，无论何时显示数据，它都应该占用空间，其他数据将被向下推。目前，我的div是隐藏的，当接收到的数据成功时，它就会显示出来。现在，如果发生了错误，我也会显示一条错误消息，我希望错误消息只占用它所需要的空间。我的js文件代码写在下面，您可以检查并关联我在这里所说的任何内容

JS文件

    $(document).ready(function(){
    //Stops the submit request
    $("#form").submit(function(e){
        e.preventDefault();
    });
    
    //checks for the button click event
    $("#mybtn").click(function(e){
        
        //get the form data and then serialize that
        dataString=$("form").serialize();
        
        //get the form data using another method 
        var docName=$("input#docName").val();
        
        //make the AJAX request, dataType is set to json
        //meaning we are expecting JSON data in response from the server
        $.ajax({
            type: "Get",
            url: "/Doctor_Appointment_Application/PatientSearch?val="+docName,
            data: docName,
            dataType: "json",
            
            //if received a response from the server
            success: function(data,textStatus,jqXHR){
                //doc Name was correct so we have some information to display   
                document.getElementById("ajaxResponse").style.display="block";
                if(data.success){
                    $("#ajaxResponse").html("");

                    $(data.docSearch).each(function(index,item){
                    var br=document.createElement('br');
                    var button = document.createElement('button');
                    var text = document.createTextNode("Book Appointment");                   
                    var img=document.createElement('img');
                    
                    img.src=item.userImage;
                    img.className+="image";

                    button.setAttribute('type', 'submit');
                    button.setAttribute('name', 'button');
                    button.setAttribute('id', 'button');
                    button.setAttribute('value',item.id);
                    button.setAttribute('class','btn btn-info mybtn');
                    button.setAttribute('style','margin-bottom:10px');
                    button.appendChild(text);

                    $("#ajaxResponse").append(img);
                    $("#ajaxResponse").append("<b>Username:</b> " + item.username+"<br>");
                    $("#ajaxResponse").append("<b>First Name:</b> " + item.fName+"<br>");
                    $("#ajaxResponse").append("<b>Last Name:</b> " + item.lName+"<br>");
                    $("#ajaxResponse").append("<b>Email:</b> " + item.email+"<br>");
                    $("#ajaxResponse").append("<b>Mobile:</b> " + item.mobile+"<br>");
                    $("#ajaxResponse").append("<b>Degree:</b> " + item.deg+"<br>");
                    $("#ajaxResponse").append("<b>Specialisation:</b> " + item.special+"<br>");
                    $("#ajaxResponse").append("<b>Experience:</b> " + item.experience+"<br>");
                    $("#ajaxResponse").append("<b>Fees:</b> " + item.fees+"<br><br>");
                    $("#ajaxResponse").append(button);
                    $("#ajaxResponse").append(br);
                    });
                } 
                     //display error message
                     else {
                         $("#ajaxResponse").html("<div><b>No Record Found!!</b></div>");
                     }
                },
                
                //If there was no resonse from the server
                error: function(jqXHR, textStatus, errorThrown){
                     console.log("Something really bad happened " + textStatus);
                      $("#ajaxResponse").html("<b>"+jqXHR.responseText+"</b>");
                },
                
                //capture the request before it was sent to server
                beforeSend: function(jqXHR, settings){
                    //adding some Dummy data to the request
                    settings.data += "&dummyData=whatever";
                    //disable the button until we get the response
                    $('#myButton').attr("disabled", true);
                },
                
                //this is called after the response or error functions are finsihed
                //so that we can take some action
                complete: function(jqXHR, textStatus){
                    //enable the button 
                    $('#myButton').attr("disabled", false);
                }
            });        
    });
});

$（文档）.ready（函数（）{
//停止提交请求
$（“#表格”）。提交（功能（e）{
e、 预防默认值（）；
});
//检查按钮单击事件
$（“#mybtn”）。单击（函数（e）{
//获取表单数据，然后序列化该数据
dataString=$（“表单”）.serialize（）；
//使用其他方法获取表单数据
var docName=$（“输入#docName”）.val（）；
//发出AJAX请求时，数据类型设置为json
//这意味着我们期望服务器响应JSON数据
$.ajax({
键入：“获取”，
url:“/Doctor\u Appointment\u Application/PatientSearch？val=“+docName，
数据：docName，
数据类型：“json”，
//如果收到来自服务器的响应
成功：函数（数据、文本状态、jqXHR）{
//文件名是正确的，所以我们有一些信息要显示
document.getElementById（“ajaxResponse”）.style.display=“block”；
if（data.success）{
$（“#ajaxResponse”）.html（“”）；
$（data.docSearch）.每个（函数（索引，项）{
var br=document.createElement（'br'）；
var button=document.createElement（'button'）；
var text=document.createTextNode（“预约”）；
var img=document.createElement（'img'）；
img.src=item.userImage；
img.className+=“图像”；
setAttribute（'type'，'submit'）；
setAttribute（'name'，'button'）；
setAttribute（'id'，'button'）；
button.setAttribute（'value'，item.id）；
setAttribute（'class'，'btn btn info mybtn'）；
setAttribute（'style'，'margin-bottom:10px'）；
按钮。追加子项（文本）；
$（“#ajaxResponse”）.append（img）；
$（“#ajaxResponse”）.append（“用户名：“+item.Username+”
”）；
$（“#ajaxsresponse”）.append（“名字：“+item.fName+”
”）；
$（“#ajaxResponse”）.append（“姓氏：“+item.lName+”
”）；
$（“#ajaxResponse”）。追加（“电子邮件：+item.Email+”
”；
$（“#ajaxResponse”）.append（“Mobile:+item.Mobile+”
”）；
$（“#ajaxResponse”）。追加（“度：+item.deg+”
”；
$（“#ajaxResponse”）。追加（“专业化：“+item.special+”
”；
$（“#ajaxResponse”）.append（“体验：+item.Experience+”
”）；
$（“#ajaxResponse”）。追加（“费用：+item.Fees+”

”；
$（“#ajaxResponse”）.append（按钮）；
$（“#ajaxResponse”）。追加（br）；
});
} 
//显示错误消息
否则{
$（“#ajaxResponse”）.html（“未找到记录！！”；
}
},
//如果没有来自服务器的响应
错误：函数（jqXHR、textStatus、errorshown）{
log（“发生了非常糟糕的事情”+textStatus）；
$（“#ajaxResponse”）.html（“+jqXHR.responseText+”）；
},
//在将请求发送到服务器之前捕获该请求
发送前：函数（jqXHR，设置）{
//向请求中添加一些虚拟数据
settings.data+=“&dummyData=whatever”；
//禁用按钮，直到我们得到响应
$（'#myButton'）.attr（“禁用”，true）；
},
//这是在找到响应或错误函数后调用的
//这样我们才能采取行动
完成：函数（jqXHR，textStatus）{
//启用按钮
$（'#myButton'）.attr（“禁用”，false）；
}
});        
});
});