JSFiddle - React, Tailwind, and code Playground

by simoncereska

HTML

<table>
<tr>
<th>jQuery
<th>JavaScript
<tr>
<td>
<pre>
$(document).ready(function() {
  // code…
});
</pre>
</td>
<td>
<pre>
document.addEventListener("DOMContentLoaded", function() {
  // code…
});
</pre>
</td>
<tr>
<td>
<pre>
var divs = $("div");
</pre>
</td>
<td>
<pre>
var divs = document.querySelectorAll("div");
</pre>
</td>
<tr>
<td>
<pre>
var newDiv = $("&lt;div/>");
</pre>
</td>
<td>
<pre>
var newDiv = document.createElement("div");
</pre>
</td>
<tr>
<td>
<pre>
newDiv.addClass("foo");
</pre>
</td>
<td>
<pre>
newDiv.classList.add("foo");
</pre>
</td>
<tr>
<td>
<pre>
newDiv.toggleClass("foo");
</pre>
</td>
<td>
<pre>
newDiv.classList.toggle("foo");
</pre>
</td>
<tr>
<td>
<pre>
$("a").click(function() {
  // code…
})
</pre>
</td>
<td>
<pre>
[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});
</pre>
</td>
<tr>
<td>
<pre>
$("body").append($("&lt;p/>"));
</pre>
</td>
<td>
<pre>
document.body.appendChild(document.createElement("p"));
</pre>
</td>
<tr>
<td>
<pre>
$("img").filter(":first").attr("alt", "My image");
</pre>
</td>
<td>
<pre>
document.querySelector("img").setAttribute("alt", "My image");
</pre>
</td>
<tr>
<td>
<pre>
var parent = $("#about").parent();
</pre>
</td>
<td>
<pre>
var parent = document.getElementById("about").parentNode;
</pre>
</td>
<tr>
<td>
<pre>
var clonedElement = $("#about").clone();
</pre>
</td>
<td>
<pre>
var clonedElement = document.getElementById("about").cloneNode(true);
</pre>
</td>
<tr>
<td>
<pre>
$("#wrap").empty();
</pre>
</td>
<td>
<pre>
var wrap = document.getElementById("wrap");
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);
</pre>
</td>
<tr>
<td>
<pre>
if($("#wrap").is(":empty"))
</pre>
</td>
<td>
<pre>
if(!document.getElementById("wrap").hasChildNodes())
</pre>
</td>
<tr>
<td>
<pre>
var nextElement = $("#wrap").next();
</pre>
</td>
<td>
<pre>
var nextElement = document.getElementById("wrap").nextSibling;
</pre>
</td>
</table>

CSS

table {
    font:13px "lucida grande", arial, sans-serif;
    text-align:left;
    border-spacing:20px;
  }
  tr:nth-child(even) {
    background:#f0f0f0;
  }
  td {padding: 3px 5px }
  pre {
    margin:0;
  }

JavaScript

/* 
 * Original post:
 * http://sharedfil.es/js-48hIfQE4XK.html
 */