Element.contains

by desandro

HTML

<div id="cereal-box">Cereal Box: 
<ul>
    <li id="heart">heart</li>
    <li id="clover">clover</li>
    <li id="horse-shoe">horse-show</li>
    <li id="blue-moon">blue-moon</li>
    <li id="diamond">diamond</li>
    <li id="rainbow">rainbow</li>
</ul>
</div>

<div id="cereal-box">Bowl
<ul>
    <li id="crunch-berry">Crunch berry</li>
</ul>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

p { color: #159; font-weight: bold; }

JavaScript

var cerealBox = document.getElementById('cereal-box'),
    heart = document.getElementById('heart'),
    crunchBerry = document.getElementById('crunch-berry');

function addText( message ) {
  var para = document.createElement('p');
  para.textContent = message;
  document.body.appendChild( para );
}

addText( 'cereal box contains heart: ' + cerealBox.contains( heart ) );
addText( 'bowl contains crunch-berry: ' + cerealBox.contains( heart ) );
addText( 'cereal box contains crunch-berry: ' + cerealBox.contains( crunchBerry ) );