时间戳

首页 > 解决方案 > 如何检查一个 div 是否包含另一个 div？

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

问题描述

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

我尝试使用该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，而无需任何代码。

标签： javascripthtmlcss

解决方案

您的代码在 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>

推荐阅读