How Do I Check If A Div Contains Another Div?

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 workin

Solution 1:

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

<divclass="row leftpad collapse"id="commentBox" ><divid="comment1"><divclass="col-md-3 dir-rat-left"><iclass="fa fa-user-circle"aria-hidden="true"></i><h6>James </h6></div><divclass="col-md-9 dir-rat-right"><pclass="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><scripttype="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:

<scripttype="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><divclass="row leftpad collapse"id="commentBox" ><divid="comment1"><divclass="col-md-3 dir-rat-left"><iclass="fa fa-user-circle"aria-hidden="true"></i><h6>James </h6></div><divclass="col-md-9 dir-rat-right"><pclass="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>

Solution 2:

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')
}

<scripttype="text/javascript"></script><divclass="row leftpad collapse"id="commentBox"><divid="comment1"><divclass="col-md-3 dir-rat-left"><iclass="fa fa-user-circle"aria-hidden="true"></i><h6>James </h6></div><divclass="col-md-9 dir-rat-right"><pclass="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>

Solution 3:

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

<scripttype="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><divclass="row leftpad collapse"id="commentBox" ><divid="comment1"><divclass="col-md-3 dir-rat-left"><iclass="fa fa-user-circle"aria-hidden="true"></i><h6>James </h6></div><divclass="col-md-9 dir-rat-right"><pclass="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.

Solution 4:

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><divclass="row leftpad collapse"id="commentBox"><divid="comment1"><divclass="col-md-3 dir-rat-left"><iclass="fa fa-user-circle"aria-hidden="true"></i><h6>James </h6></div><divclass="col-md-9 dir-rat-right"><pclass="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>