JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<h4>Elements captured:</h4>
<fieldset>
    <legend>jQuery</legend>
    <label>Replicated IDs: <span id="jqReplicate"></span></label>
    <label>Unique IDs: <span id="jqUnique"></span></label>
</fieldset>

<fieldset>
    <legend>JS</legend>
    <label>Replicated IDs: <span id="jsReplicate"></span></label>
    <label>Unique IDs: <span id="jsUnique"></span></label>
</fieldset>

<h1>Just a regular heading</h1>

<p>Mauris quis scelerisque ipsum, eget gravida lectus. Sed quis dictum sapien, ac porta tortor. Cras quis lacus sit amet nulla congue dapibus. Aenean rutrum, diam non tristique faucibus, urna lectus egestas eros, eget iaculis nunc lacus et lorem. Nunc non erat sed massa rutrum fringilla non a dolor. Nam quis quam cursus purus iaculis adipiscing in in metus. Curabitur sed mi ut odio sagittis tristique a ut mauris. Nulla sagittis faucibus metus, sit amet vehicula mi aliquam quis. Sed elementum tortor vitae condimentum commodo. Etiam aliquam ante turpis, in tempor ligula iaculis vitae. Maecenas vitae magna nec felis laoreet venenatis. Cras congue, eros et porta congue, massa sapien laoreet est, in vestibulum arcu nisi et purus. Nullam non lorem consectetur, molestie magna in, gravida dui.</p>
<p>Quisque nec rhoncus odio, sed volutpat metus. Cras ligula sem, tempor in porta sed, mollis non augue. Suspendisse at rhoncus leo. In tempor, augue id auctor iaculis, quam neque lacinia dolor, non sollicitudin lacus tortor sed odio. Vestibulum feugiat fringilla ligula ac mollis. Integer sollicitudin nibh nec turpis tincidunt tempus. Aenean turpis est, vestibulum faucibus tempor eget, vehicula nec nisi. Quisque tellus quam, cursus eu tincidunt non, viverra quis enim. Cras cursus pellentesque odio, vitae dapibus diam tempus sed. Nulla ultricies mi quis leo tempor commodo. Morbi sagittis dapibus pretium. Donec tortor risus, porttitor quis venenatis eget, pretium a sapien. Aliquam eu consectetur nisi.</p>

<h1 id="awesomeHeading">Heading 1, with replicated ID</h1>

<p>Mauris...

CSS

fieldset label {
    display: block;
}

JavaScript

/*
   Case 3: Means to Reference a Particular Element From a Script
   =============================================================
   
   In this example, we're comparing two different cases:
   
   - Three headings with the same ID
   - One heading with a unique ID
   
   The HTML4.01 spec at http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
   specifies that IDs should be unique. Let's have a look at what happens when 
   they aren't, and how different browsers behave. We're expecting different
   behavior when using vanilla JS and jQuery, so we'll be testing with both.
   
   Chrome 28, Firefox 22, Safari 6.0.5, IE9: 
       Using both jQuery and JS, the selections seem to return the first match.
       If there are multiple elements with the same IDs, the remaining elements
       are ignored?
 
    Testing with jQuery & JS
    ========================
    
    We'll select elements using the unique and replicated IDs, and see which
    elements end up in our collection.
*/

jQuery(document).ready(function() {
    /* Testing with jQuery */
    var $replicatedElements = $('#awesomeHeading'),
        $uniqueElement      = $('#uniqueID');
    
    $('#jqReplicate').html( $replicatedElements.length );
    $('#jqUnique').html( $uniqueElement.length );
    console.log( $replicatedElements );
    console.log( $uniqueElement );
    
    /* Testing with JS */
    
    // The function name getElementById kinda lets us know that we'll
    // only be getting one element
    var replicatedElements = document.getElementById('awesomeHeading'),
        uniqueElement      = document.getElementById('uniqueID');
    
    // We'll only get one element here, so display the element HTML instead of the count
    document.getElementById('jsReplicate').innerHTML = replicatedElements.innerHTML;
    document.getElementById('jsUnique').innerHTML = uniqueElement.innerHTML;
    console.log( replicatedElements );
    console.log( uniqueElement );
});