JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
<input type="checkbox" onclick="alert('test');" checked hidefocus />
<table cellspacing=2 border=1>
    <thead>
        <th>Property name</th>
        <th>using attr()</th>
        <th>using getAttributeNode()</th>
    </thead>
    <tbody>
    </tbody>
</table>

CSS

input { display:none; }
th { font-weight: bold; }
th, td { padding: 3px 5px; }

JavaScript

var tb = $('tbody:first'), inp = $('input:first'), attrs = ["type", "onclick", "checked", "hidefocus"];

for (var i=0; i<attrs.length; i++) {
    tb.append('<tr><td>'+attrs[i]+'</td><td>'+(typeof inp.attr(attrs[i]))+'</td><td>'+(typeof inp[0].getAttributeNode(attrs[i]).value)+'</td>');
    console.log(attrs[i] + ': ', inp.attr( attrs[i] ));
    console.log('property ' + attrs[i] + ': ', inp[0][ attrs[i] === "hidefocus" ? "hideFocus" : attrs[i] ]);
    console.log('gan ' + attrs[i] + ': ', inp[0].getAttributeNode( attrs[i] ).value);
}