CODEWITHSUNDEEP
javascripthtmlcss
Franco
Franco

Reputation: 53

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

Upvotes: 4

Views: 19158

Answers (5)

Pastuh
Pastuh

Reputation: 376

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

Upvotes: 1

brk
brk

Reputation: 50291

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>

Upvotes: 5

Rajendra arora
Rajendra arora

Reputation: 2224

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>

Upvotes: -1

R Pelzer
R Pelzer

Reputation: 1268

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.

Upvotes: 0

Mamun
Mamun

Reputation: 68943

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>

Upvotes: 7

Related Questions