How to check if an element is nested inside another element using JavaScript?

Question

I have an HTML structure like below. This structure is a nested list.

<ul id="u0">
    <li id="l1">
        <a id="a1"></a>
        <ul id="u1">
            <li id="l2">
                <a id="a2"></a>
            </li>
            <li id="l3">
                <a id="a3"></a>
                <ul id="u2">
                    <li id="l4">
                        <a id="a4"></a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

and looking for a JS function to identify whether an element is in a specific branch. For example if assume the function is function(id1,id2)

function('a4','l4') return true (a4 is a child of l4)
function ('a4','l2') returns false (a4 is not a child of l2)
function('a4','l1') returns true (a4 is a child of l1)

what I have done is to use children() and iterate the results but this did not work. I have a feeling that the answer is very short and I am overcomplicating a simple question.

Ramesh Reddy · Accepted Answer · 2022-01-04 17:53:15Z

3

You can use querySelector to query the parent, child and convert the result to a boolean:

const contains = (childId, parentId) => {
  return !!document.querySelector(`#${parentId}`).querySelector(`#${childId}`);
}

console.log(contains('a4', 'l4')) // return true (a4 is a child of l4)
console.log(contains('a4', 'l2')) // returns false (a4 is not a child of l2)
console.log(contains('a4', 'l1')) // returns true (a4 is a child of l1)

<ul id="u0">
  <li id="l1">
    <a id="a1"></a>
    <ul id="u1">
      <li id="l2">
        <a id="a2"></a>
      </li>
      <li id="l3">
        <a id="a3"></a>
        <ul id="u2">
          <li id="l4">
            <a id="a4"></a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

answered Jan 4, 2022 at 17:53

Ramesh Reddy

10.7k3 gold badges22 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MWO · Accepted Answer · 2022-01-04 18:04:18Z

You can simply use the Node.contains() method:

const foo = (id1, id2)=>{
  return document.getElementById(id2).contains(document.getElementById(id1))  
}
console.log(foo('a4','l4'))
console.log(foo('a4','l2'))
console.log(foo('a4','l1'))

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
    <div id="app"></div>
    <ul id="u0">
    <li id="l1">
        <a id="a1"></a>
        <ul id="u1">
            <li id="l2">
                <a id="a2"></a>
            </li>
            <li id="l3">
                <a id="a3"></a>
                <ul id="u2">
                    <li id="l4">
                        <a id="a4"></a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>

</html>

Alok Prakash · Accepted Answer · 2022-01-04 18:25:10Z

1

function isChild(childId, parentId) {
  let c = document.getElementById(childId);
  let parentElement = c.parentNode;
  while (parentElement) {
    if (parentElement.id === parentId) {
      return true;
    }
    parentElement = parentElement.parentNode;
  }
  return false;
}

answered Jan 4, 2022 at 18:25

Alok Prakash

3313 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to check if an element is nested inside another element using JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related