How do I check if a div contains another div?

user_1933996 0
Viewed 10806

I need to show alert if my parent div has a child div using JavaScript only No jQuery.

I have tried using the contains() function to check my div and send alert but it's not working.

<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>

There should be an alert box with message yes in it but it's not visible. I have also tried checking JavaScript using the alert() method only without any code.

css html javascript
5 Answers

Your code is running before the DOM is fully loaded. Move your script at the bottom of the page:

<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>

OR: Wrap the code with DOMContentLoaded which will ensure that code placed inside will be executed only after the DOM is fully loaded:

<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>

user_74613810

You can use querySelector . If the child is not present it will give a null value

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>

user_21813970

Make sure that the whole DOM is loaded before you execute javascript code. You can do this by adding the event listener DOMContentLoaded to your code or placing your scripts at the end of the file

<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>

You won't get an alert because parentDiv will not exist yet and the value will be null. This results that it does not contain the contains() function and it will throw an error. To be safe you can add a null check inside the if statement.

user_18645870 
let table = document.getElementById("niceTable");
let tds = table.getElementsByTagName("td");

for (let i = 0; i < tds.length; i++) {
    tds[i].onclick = function () {
        checkInputElement(tds[i]);
    };
}

function checkInputElement(element) {
    let input = element.querySelector("input");
    console.log(element.contains(input));
}
user_43416440

How about using window.onload function? 

<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>
user_28026220
Related