Question

只需使用id对我的div中的孩子进行简单的检查。但无论它是否为空，它总是返回true。怎么回事？

＆＃13;

<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<h1 id="number"></h1>
<div id="bigbox">
   <p>Follow us:</p>
   <div id="box">
     <!-- javascript is lying about this div -->    
   </div>
   
</div>
<input id="input" type="button" value="click" />



<script>
$("#input").click(function(){
    var ele = document.getElementById('box');
    if (ele.hasChildNodes()) {
        alert("has");
        alert(ele.hasChildNodes());
    }
    else{
        alert("not");
        alert(ele.hasChildNodes());
    }
}); 
</script>
</html>

＆＃13;

Answer 1

试试这个

if ( $('#box').children().length > 0 ) {
     // this div has child and do something
}

Answer 2

实际上我认为一切都很完美，但你的div框中有空格，所以删除空格并尝试，将解决你的问题。

如果指定的节点有任何子节点，则hasChildNodes（）方法返回true，否则返回false。

注意：节点内的空格被视为文本节点，所以如果你在元素，该元素内留下任何空格或换行符还有子节点。

<div id="box"></div> <!-- No space here between start and end -->

检查此 DEMO

Answer 3

空格和换行符是文本节点，因此它有子节点。如果您不想使用jQuery，只需使用：

ele = document.getElementById('box');
if (ele.children.length > 0)) {
    alert("has");
    alert(ele.hasChildNodes());
}
else{
    alert("not");
    alert(ele.hasChildNodes());
}

javascript检查子元素

3 个答案: