How to return true in JavaScript if parent element contains child elements?-JS Tutorial-php.cn

How to return true in JavaScript if parent element contains child elements?

PHPz

Release： 2023-09-03 21:01:08

forward

705 people have browsed it

如果父元素包含子元素，JavaScript 中如何返回 true？

In this tutorial, we will learn how to return true if the parent element contains a child element in JavaScript. Suppose you have two HTML elements, a parent element and a child element, and you want to know if the parent element contains the child element.

Using the Node.contains() method

The contains() method of the Node interface returns a Boolean value indicating whether the node is a descendant of the given node.

If you want to know whether the parent node is an element that contains child elements, you can use the Node.contains() method.

This is a simple example -

<div id="parent">
   <p id="child">Some text</p>
</div>

Copy after login

The JavaScript code snippet below checks if a parent element contains a child element.

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.contains(child) 
// returns true

Copy after login

In the above code, we use the getElementById() method to get references to parent and child elements.

Then we use parent.contains(child) to check whether the parent element contains child elements.

Example

Here is the complete HTML code -

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="parent">
      <p id="child"></p>
   </div>
   <div id="result"></div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML ="Does parent contain child: "+ parent.contains(child)
   </script>
</body>
</html>

Copy after login

Use hasChildNodes() method

Another way to check if the parent element contains any child elements The method is to use the hasChildNodes() method.

Returns true if the hasChildNodes() method contains any child elements.

This is a simple example-

<div id="parent">
   <p id="child">Some text</p>
</div>

Copy after login

See the JavaScript code below-

var parent = document.getElementById("parent");
var child = document.getElementById("child");

document.getElementById("result").innerHTML = parent.hasChildNoodes();

Copy after login

In the above code, we use the getElementById() method to get the parent element and child A reference to the element.

Then we use the hasChildNodes method to check whether the parent element exists and whether the element has child elements.

Example

Here is the complete HTML code -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <div id="parent">
      <p id="child"></p>
   </div>
   <script>
      var parent = document.getElementById("parent");
      var child = document.getElementById("child");
      document.getElementById("result").innerHTML = parent.hasChildNodes();
   </script>
</body>
</html>

Copy after login

To summarize, there are several ways to check if a parent element contains a child element. You can use the Node.contains() or hasChildNodes() method.

The above is the detailed content of How to return true in JavaScript if parent element contains child elements?. For more information, please follow other related articles on the PHP Chinese website!