JSFiddle - React, Tailwind, and code Playground

by Francois Wahl

HTML

<body>
<div id="jq-siteContain">
      <div id="jq-header">
        <a id="jq-siteLogo" href="http://jquery.com/" title="jQuery Home"><img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" width="215" height="53" alt="jQuery: Write Less, Do More." /></a>
        <div id="jq-primaryNavigation">
          <ul>
<li class="jq-jquery jq-current"><a href="http://jquery.com/" title="jQuery Home">jQuery</a></li>
<li class="jq-ui"><a href="http://jqueryui.com/" title="jQuery UI">UI</a></li>
<li class="jq-mobile"><a href="http://jquerymobile.com/" title="jQuery Mobile">Mobile</a></li>
<li class="jq-meetup"><a href="http://meetups.jquery.com/" title="jQuery Meetups">Meetups</a></li>
<li class="jq-forum"><a href="http://forum.jquery.com/" title="jQuery Forum">Forum</a></li>
<li class="jq-blog"><a href="http://blog.jquery.com/" title="jQuery Blog">Blog</a></li>
<li class="jq-about"><a href="http://jquery.org/about" title="About jQuery">About</a></li>
<li class="jq-donate"><a href="http://jquery.org/donate" title="Donate to jQuery">Donate</a></li>
          </ul>
        </div><!-- /#primaryNavigation -->

        <div id="jq-secondaryNavigation">
          <ul>
            <li class="jq-download jq-first"><a href="http://docs.jquery.com/Downloading_jQuery">Download</a></li>
            <li class="jq-documentation jq-current"><a href="http://docs.jquery.com/">Documentation</a></li>
            <li class="jq-tutorials"><a href="http://docs.jquery.com/Tutorials">Tutorials</a></li>
            <li class="jq-bugTracker"><a href="http://bugs.jquery.com/">Bug Tracker</a></li>
            <li class="jq-discussion jq-last"><a href="http://docs.jquery.com/Discussion">Discussion</a></li>
          </ul>
        </div><!-- /#secondaryNavigation -->



        <form id="jq-primarySearchForm" action="http://api.jquery.com" method="get" autocomplete="off">
          <div>
            <input type="hidden" value="1" name="ns0"/>
            <label...

JavaScript

var $document = $(document);
var $element = $("#jq-footer");
var exists;

console.time('element closest to body');
for (var i = 0; i < 100000; i++) {
    exists = $element.closest("body").length;
}
console.timeEnd('element closest to body');

console.time('document contains element');
for (var i = 0; i < 100000; i++) {
    exists = $.contains(document.documentElement, $element[0]);    
}
console.timeEnd('document contains element');

console.time('element has parent of body');
for (var i = 0; i < 100000; i++) {
    exists = $($element).parents().is("body");
}
console.timeEnd('element has parent of body');

console.time('manual while loop');
for (var i = 0; i < 100000; i++) {
    exists = elementExists($element[0]);
}
console.timeEnd('manual while loop');

function elementExists(element) {
    while (element) {
        if (element == document) {
            return true;
        }
        element = element.parentNode;
    }
    return false;
}