Question

如果我的父div有一个仅使用JavaScript而不是jQuery的子div，我需要显示警报。

我尝试使用contains()函数检查我的div并发送警报，但是它不起作用。

<script type="text/javascript">
  var parentDiv = document.getElementById("commentBox");
  var childDiv = document.getElementById("comment1");
  if (parentDiv.contains(childDiv)) {
    alert("yes");
  } else
  {
    alert("no");
  }
</script>
<div class="row leftpad collapse" id="commentBox">
  <div id="comment1">
    <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
      <h6>James </h6>
    </div>
    <div class="col-md-9 dir-rat-right">
      <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
    </div>
  </div>
</div>

应该有一个警告框，其中包含消息yes，但它不可见。我也尝试过仅使用alert()方法检查JavaScript，而没有任何代码。

Answer 1

您的代码在DOM完全加载之前正在运行。将脚本移到页面底部：

<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
      <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
        <h6>James </h6>
      </div>
      <div class="col-md-9 dir-rat-right">
        <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
      </div>
    </div>
</div>
    
<script type="text/javascript">
  var parentDiv = document.getElementById("commentBox");
  var childDiv = document.getElementById("comment1");
  if (parentDiv.contains(childDiv)) {
    alert("yes");
  }
  else{
    alert("no");
  }

</script>

或：用DOMContentLoaded包装代码，这将确保仅在DOM完全加载后才执行放置在内部的代码：

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
    var parentDiv = document.getElementById("commentBox");
    var childDiv = document.getElementById("comment1");
    if (parentDiv.contains(childDiv)) {
      alert("yes");
    }
    else{
      alert("no");
    }
  });

</script>

<div class="row leftpad collapse" id="commentBox" >
    <div id="comment1">
      <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
        <h6>James </h6>
      </div>
      <div class="col-md-9 dir-rat-right">
        <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
      </div>
    </div>
</div>

Answer 2

在执行JavaScript代码之前，请确保已加载整个DOM。您可以通过将事件监听器Var1 D1 D2 D3 1 cancer 7 3 3 2 headache NA 1 3 3 nothing 1 4 2添加到代码中或将脚本放置在文件末尾来实现此目的

DOMContentLoaded

您将不会收到警报，因为<script type="text/javascript"> document.addEventListener('DOMContentLoaded', function(){ var parentDiv = document.getElementById("commentBox"); var childDiv = document.getElementById("comment1"); if (parentDiv && parentDiv.contains(childDiv)) { alert("yes"); } else { alert("no"); } }, false); </script> <div class="row leftpad collapse" id="commentBox" > <div id="comment1"> <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i> <h6>James </h6> </div> <div class="col-md-9 dir-rat-right"> <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p> </div> </div> </div>尚不存在，其值为parentDiv。结果导致它不包含null函数，并且将引发错误。为了安全起见，您可以在if语句中添加一个空检查。

Answer 3

您可以使用querySelector。如果孩子不在场，它将给出一个空值

var hasChildDiv = document.getElementById("commentBox").querySelector("#comment1");
if (hasChildDiv !== null) {
  alert('yes')
}

<script type="text/javascript">
</script>
<div class="row leftpad collapse" id="commentBox">
  <div id="comment1">
    <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
      <h6>James </h6>
    </div>
    <div class="col-md-9 dir-rat-right">
      <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
    </div>
  </div>
</div>

Answer 4

如何使用window.onload函数？

<script>
    window.onload = function() {
        var parentDiv = document.getElementById("commentBox");
        var childDiv = document.getElementById("comment1");
        if (parentDiv.contains(childDiv)) {
            alert("yes");
        } else {
            alert("no");
        }
    }
</script>

This will execute the function until dom loads completely

<script>
    window.onload = function() {
        var parentDiv = document.getElementById("commentBox");
        var childDiv = document.getElementById("comment1");
        if (parentDiv.contains(childDiv)) {
            alert("yes");
        } else {
            alert("no");
        }
    }
</script>
<div class="row leftpad collapse" id="commentBox">
    <div id="comment1">
        <div class="col-md-3 dir-rat-left"> <i class="fa fa-user-circle" aria-hidden="true"></i>
            <h6>James </h6>
        </div>
        <div class="col-md-9 dir-rat-right">
            <p class="removemarg">always available, always helpfull that goes the same for his team that work with him - definatley our first phone call.</p>
        </div>
    </div>
</div>

如何检查div是否包含另一个div？

4 个答案: