"/>  ">
search

Home >Web Front-end >JS Tutorial >How to return true in JavaScript if parent element contains child elements?

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

PHPz
PHPzforward
2023-09-03 21:01:08736browse

如果父元素包含子元素，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>

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

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>

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>

See the JavaScript code below-

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

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

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>

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!

JavaScript html 接口
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to disable unified scaling in canvas using FabricJS?Next article：How to disable unified scaling in canvas using FabricJS?

Related articles

See more