说明：

我有一个asp.net应用程序，我可以通过单击按钮检索车辆信息。然后，车辆详细信息显示在模式屏幕中，其中包含以下数据：id、车辆名称、年份和车辆文档。
车辆文档显示在锚定标记中，锚定标记使用javascript创建。我的期望是，当我检索车辆详细信息时，将显示其相关的车辆文档，并在锚定标记中创建。如果检索到另一个车辆详细信息，也会在锚定标签中创建相关的车辆文档。
我遇到的问题是，当为车辆详细信息创建锚定标记时，我无法在下次检索其他车辆详细信息时创建锚定标记。我已经在下面概述了我不断遇到的错误。
我在下面提供了完整的工作代码，包括我遇到的错误消息。希望有人能帮助我。

详细控制器：

DetailController:

[HttpPost]
public ActionResult GetDetail(int? id)
{
  return _context.Vehicle.Where(v => v.ID == id).Select(x => new VehicleModel(){
     ID = x.ID,
     VEHICLENAME = x.VEHICLENAME,
     YEAR = x.YEAR,
     VEHICLE_DOCUMENTATION = x.VEHICLE_DOCUMENTATION
  }).FirstOrDefault();
}

详细信息页面：

Button
------
<button type="button" data-toggle="modal" data-target="#detailModal" onclick="postData(id)"></button>

Modal window appears when button is clicked
-------------------------------------------
<div class="modal fade" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="detailModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalTitle">Vehicle Detail</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ID: <label id="ID"></label><br />
                VEHICLE NAME: <label id="VEHICLENAME"></label><br />
                YEAR: <label id="YEAR"></label><br />
                VEHICLE DOCUMENTATION: <label id="VEHICLE_DOCUMENTATION"></label><br />
            </div>
        </div>
    </div>
</div>

AJAX POST to GetDetail method:
------------------------------
<script>
function postData(id) {
   response = '';
            $.ajax({
                async: true,
                type: "POST",
                url: "/Detail/GetDetail",
                data: { 'id': id},
                success: function (xhr) {
                    response = xhr;
                    $('#ID').text(response.data.ID);
                    $('#VEHICLENAME').text(response.data.VEHICLENAME);
                    $('#YEAR').text(response.data.YEAR);
                    $('#VEHICLE_DOCUMENTATION').text(response.data.VEHICLE_DOCUMENTATION);

                    //Create anchor tags
                    if (response.data.VEHICLE_DOCUMENTATION.length !== 0) {
                        for (const doc of response.data.VEHICLE_DOCUMENTATION) {
                            const anchor = document.createElement('a');
                            const list = document.getElementById('VEHICLE_DOCUMENTATION');
                            const li = document.createElement('ol');
                            anchor.href = 'www.vehicledocumentationexample.com';
                            anchor.innerText = `${doc}`;

                            //THIS IS WHERE THE ERROR IS BEING FLAGGED:
                            li.appendChild(anchor);
                            list.appendChild(li);
                        }
                   //Delete/Remove elements
                    } else if (response.data.VEHICLE_DOCUMENTATION.length == 0) {
                        response.data.VEHICLE_DOCUMENTATION = [];
                        document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";

                       //WHAT I'VE TRIED:
                       //document.getElementById('VEHICLE_DOCUMENTATION').remove();
                       //document.getElementById('VEHICLE_DOCUMENTATION').outerHTML = "";
                    }
                },
                error: function (xhr) {
                    response = xhr;
                }
            })

}
</script>

浏览器错误消息：

Uncaught TypeError: Cannot read property 'appendChild' of null
    at Object.success (...)
    at fire (jquery.js:3240)
    at Object.fireWith [as resolveWith] (jquery.js:3370)
    at done (jquery.js:9061)
    at XMLHttpRequest.<anonymous> (jquery.js:9303)