使用javascript创建和删除/销毁dom元素的正确方法

64jmpszr  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(678)

说明:

我有一个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)
dbf7pr2w

dbf7pr2w1#

当你把:

document.getElementById("VEHICLE_DOCUMENTATION").outerHTML = "";

您要做的是删除label元素,因此当您从

const list = document.getElementById('VEHICLE_DOCUMENTATION');

由于元素不再存在,它将返回null
您不应该使用“outerhtml”,而应该使用“innerhtml”,这是它们之间的区别:

console.log(document.getElementById("VEHICLE_DOCUMENTATION").outerHTML);

console.log(document.getElementById("VEHICLE_DOCUMENTATION").innerHTML);
<label id="VEHICLE_DOCUMENTATION">
  <p>something</p>
</label>

相关问题