Question

我有这个html代码

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="shipment-filter">
    <a class="dropdown-item" href="javascript:void(0)" data-table="ShipmentsDataTable" id="exportShipmentCSV_all"> CSV - All Shipments </a>
</div>

基于此，我想在#exportShipmentCSV_all之前添加一个锚元素。

这就是我所做的。

let newElementA = document.createElement('a');
newElementA.setAttribute('id', 'classfilterBtnIsClicked');
newElementA.dataset.classfilterBtnIsClicked = true;

let currentDiv  = document.getElementById('shipment-filter');
currentDiv.insertBefore(newElementA, currentDiv.childNodes[0]);

之后，

如果点击了#exportShipmentCSV_all，我想用这种方法检查元素是否存在

if (document.getElementById('classfilterBtnIsClicked').length) {
    // Code here
}

基于此参考。 Is there an "exists" function for jQuery?

但是这样做，我在chrome开发工具console.tab中遇到了这个错误

未捕获的TypeError：无法读取null的属性“长度”

在此代码中，还包含jquery

您能否建议我应该检查的方式（是否已创建元素）？

Answer 1

您可以检查document.getElementById('classfilterBtnIsClicked')是否返回null。如果该元素不存在，则document.getElementById('classfilterBtnIsClicked')将返回null。

Answer 2

Document.getElementById() - Return value

描述与指定ID匹配的DOM元素对象的Element对象；如果在文档中未找到匹配的元素，则为null。

返回的元素对象没有 length 属性，因此得到 undefined 。

为什么使用 length ？您无需在此处使用 length 属性，只需检查元素对象本身即可：

let newElementA = document.createElement('a');
newElementA.setAttribute('id', 'classfilterBtnIsClicked');
newElementA.dataset.classfilterBtnIsClicked = true;

let currentDiv  = document.getElementById('shipment-filter');
currentDiv.insertBefore(newElementA, currentDiv.childNodes[0]);

if (document.getElementById('classfilterBtnIsClicked')) {
    console.log('Element exists');
}

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="shipment-filter">
    <a class="dropdown-item" href="javascript:void(0)" data-table="ShipmentsDataTable" id="exportShipmentCSV_all"> CSV - All Shipments </a>
</div>

检查是否在javascript中创建了元素

2 个答案: