An element inside another element in JavaScript?

Javascript Web Development Front End Technology

In this article, we are going to discuss about an element inside another element in JavaScript with suitable examples.

In JavaScript to access an element within another element i.e.., the inner element, we use ‘.’ property. We can also check whether an element is present within another element or not using contains() method. This method either returns true or false.

Let’s look into the possible ways to check an element inside another element with appropriate examples further in this article.

Syntax

The syntax to access an element inside another element is −

document.getElementById(‘IDname’).getElementsByTagName(‘Tag’)[i].innerHTML;

Where,

IDname is the name of a particular ID tag.
Tag is the Tag type which can be ‘p’, ’a’, ’span’, ’strong’, etc.
i is the index which specifies the element to be accessed.

The content inside the element is returned.

Example 1

This is an example program to access an element inside another element in JavaScript.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>An element inside another element in JavaScript</title>
</head>
<body style="text-align: center;">
   <h3>An element inside another element in JavaScript</h3>
   <div id="main">
      <p id="sub">Hello!</p>
      <p id="sub2">Hope you are doing well?</p>
   </div>
   <script>
      var x = document.getElementById('main').getElementsByTagName('p')[0].innerHTML = 'Bye'; // Accessing an element with in an element and changing the value.
      var y = document.getElementById('main').getElementsByTagName('p')[1].innerHTML = 'See you soon';
  </script>
</body>
</html>

On executing the above code, the following output is generated.

Example 2

This is an example program to access an element inside another element and changing their values in JavaScript.

<!DOCTYPE html>
<html>
<head>
   <meta charset = "UTF-8">
   <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
   <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   <title>An element inside another element in JavaScript</title>
</head>
<body style="text-align: center;">
   <h3>Accessing an element which is inside another element in JavaScript using getElementsByClassName()
    method.</h3>
   <div id="main">
      <p id="sub" class="child1-main">LinkedIn</p>
      <p id="sub2" class="child2-main">Facebook</p>
   </div>
   <script>
      var x = document.getElementById('main').getElementsByClassName('child1-main'); // Accessing an element which is inside another element using getElementsByClassName() method.
      x[0].innerHTML = "Twitter"; // Instead of innerHTML, you can also use textContent// The element LinkedIn is changed to Twitter
   </script>
</body>
</html>

On executing the above code, the following output is generated.

Syntax

The syntax to check if an element is inside another element or not −

document.getElementById(‘MainID’).contains(document.getElementById(‘subID’));

Where,

MainID is the parent ID tag name.
subID is the child ID tag name.

This function returns true if subID element is inside the MainID element and false if subID element is not inside the MainID element.

Example 3

This is an example program to check an element is inside another element or not using contains() method in JavaScript.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>An element inside another element in JavaScript</title>
</head>
<body style="text-align: center;">
   <h3>To check an element is inside another element or not in JavaScript using contains() method.
   <div id="main">
      <p id="sub">Hello!</p>
      <p id="sub2">Hope you are doing well?</p>
   </div>
   <p id="result"></p>
   <script>
      var x = document.getElementById('sub');
      var y = document.getElementById('main').contains(x);
      document.getElementById('result').innerHTML = 'The element with id "main" contains the element with id "sub" : '+y;
   </script>
</body>
</html>

On executing the above code, the following output is generated.