Javascript 向DOM中添加新节点并检查它们是否存在

我有一个函数，可以动态地将新的

元素添加到DOM中。完成后，DOM看起来与此类似，但有更多的标签：

<ul class='map-listings'>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>

---

到目前为止，我可以一直看到我的函数发出警报，但映射列表中没有显示任何内容。length以下代码将获取

元素中的
元素列表

然后，它会更改每种颜色的背景色和前景色


函数过滤器逻辑（事件，选项卡名）{
if（tabName=='dWeb'）{
var els=document.queryselectoral（'.map listings>li'）；
console.log（'找到的元素：'，els.length）
弗雷赫酒店(
功能（el）{
el.style.backgroundColor=“黑色”；
el.style.color=“白色”；
}
);
}
}
点击我

jdfkajdl
fdsafsadf
gfdsgdfsg
树鹪鹩
ghfddfg

不要使用内联JS-这很难维护
使用jQuery的
.find（）
为子节点sarch
向
data-*
属性和jQuery的
.data（）
方法问好


功能过滤器逻辑（evt）{
var mapListings=$（'.map listings'）.find（“li”）；//使用jQuery的.find（）
if（$（this）.data（“tabname”）=“dWeb”）{
警报（'fired'）
if（mapListings.length）{
警报（mapListings.length）
}
}
}
$（#filtersLogic”）。在（“单击”，filtersLogic）







点击
您可能对$（'.map listings li'）感兴趣，而不是$（'.map listings'）.childNodes。childNodes不是jQuery propNot related，但您需要在内联处理程序中使用
event
来获取事件对象
…实际上，它是相关的，因为调用时，
evt
应该给您一个引用错误，除非它在别处定义，这似乎不太可能。@Skinypete您能进一步解释这意味着什么吗？是的，参数名
evt
应拼写为
event
，因为提供给
onclick
属性的字符串将成为分配给该元素的函数体。事件对象作为第一个函数参数传递给该函数，其全名为
event
。因此，为了使用它，您需要提供正确的参数名称。基本上和这个一样
myElement.onclick=function（event）{filtersLogic（event，'dWeb'）；}
。因此，您可以看到字符串现在是实际的函数体，如果您使用
evt
而不是
event
，它将失败。内联JS，当只是一个函数调用时，维护起来并不比添加一个类来连接处理程序和一个数据属性来存储一些数据更难。应该避免使用jQuery的
.data（）
，除非您确实需要对数据的重复引用。通常只有在您需要改变数据并在整个程序中跟踪数据时才会出现这种情况。
var-mapListings=$（'.map-listings li'）
比
var-mapListings=$（'.map-listings'）更快。查找（“li”）
因为它只调用一次
querySelectorAll
函数。重复ens.css两次。为什么？另外，使用严格相等
===
而不是
==
当我知道两边都是字符串时，不需要严格相等。我已经好几年没有写过live JQuery了，所以这两个
els.css
是因为我忘了你可以把它们结合起来。但再一次，我现在一有机会就避开jQuery。香草JS更快。
function filtersLogic(evt, tabName){
    var i;
    var mapListings = $('.map-listings').childNodes;
    alert('clicked')
    if (tabName == 'dWeb'){
        alert('fired')
        if (mapListings.length != 0){
            alert(mapListings.length) 
        }
    }
}