Comment savoir si une balise est contenue dans une autre balise en JavaScript ?

Réponses rédigées par Antoine

Dernière mise à jour : 2022-05-07 11:38:35

Question

Comment savoir si une balise HTML est contenue dans une autre balise HTML, en JavaScript ?

<div id="conteneur">
  <div id="1">
     Exemple de contenu numéro 1
  </div>
  <div id="2">
     Exemple de contenu numéro 2
  </div>
</div>
<div id="3">
  Exemple de contenu numéro 3
</div>

Comment vérifier par exemple que les balises <div>1 et 2 sont bien contenues dans le conteneur, et que la 3 ne l'est pas ?

Réponse

Pour vérifier si une balise est contenue dans une autre balise, en JavaScript, vous pouvez utiliser la méthode Node.contains() de la manière suivante :

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment savoir si une balise est contenue dans une autre balise en JavaScript ?</title>
</head>
<body>
<div id="conteneur">
  <div id="1">
    Exemple de contenu numéro 1
  </div>
  <div id="2">
    Exemple de contenu numéro 2
  </div>
</div>
<div id="3">
  Exemple de contenu numéro 3
</div>

<script>
function verifContenu(parent, enfant) 
{
  if (parent.contains(enfant))
  {
    return true;
  }
  else
    return false;
}

parent = document.getElementById('conteneur');
enfant_1 = document.getElementById('1');
enfant_2 = document.getElementById('2');
enfant_3 = document.getElementById('3');

if (verifContenu(parent, enfant_1) == true)
{
  alert("la balise avec l'ID 1 est contenu dans le conteneur");
}
if (verifContenu(parent, enfant_2) == true)
{
  alert("la balise avec l'ID 2 est contenu dans le conteneur");
}
if (verifContenu(parent, enfant_3) == false)
{
  alert("la balise avec l'ID 3 n'est pas contenu dans le conteneur");
}
</script>
</body>
</html>

Vous trouverez d'avantage d'information sur la manière de vérifier si une balise est contenue dans une autre balise, avec la méthode Node.contains() via cette page du site de Mozilla.