Vanilla JS equivalents of jQuery methods

gistfile1.js

// jQuery
$(document).ready(function() {
  // code…
});

// Vanilla
document.addEventListener("DOMContentLoaded", function() {
  // code…
});

// jQuery
var divs = $("div");

// Vanilla
var divs = document.querySelectorAll("div");

// jQuery
var newDiv = $("<div/>");

// Vanilla
var newDiv = document.createElement("div");

// jQuery
newDiv.addClass("foo");

// Vanilla
newDiv.classList.add("foo");

// jQuery
newDiv.toggleClass("foo");

// Vanilla
newDiv.classList.toggle("foo");

// jQuery
$("a").click(function() {
  // code…
})

// Vanilla
[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

// jQuery
$("body").append($("<p/>"));

// Vanilla
document.body.appendChild(document.createElement("p"));

// jQuery
$("img").filter(":first").attr("alt", "My image");

// Vanilla
document.querySelector("img").setAttribute("alt", "My image");

// jQuery
var parent = $("#about").parent();

// Vanilla
var parent = document.getElementById("about").parentNode;

// jQuery
var clonedElement = $("#about").clone();

// Vanilla
var clonedElement = document.getElementById("about").cloneNode(true);

// jQuery
$("#wrap").empty();
var wrap = document.getElementById("wrap");

// Vanilla
while(wrap.firstChild) wrap.removeChild(wrap.firstChild);

// jQuery
if($("#wrap").is(":empty"))

// Vanilla
if(!document.getElementById("wrap").hasChildNodes())

// jQuery
var nextElement = $("#wrap").next();

// Vanilla
var nextElement = document.getElementById("wrap").nextSibling;

Thanks for the great resource!

For the following:

// jQuery
$('#wrap').empty()

// Vanilla
var wrap = document.getElementById('wrap')
while(wrap.firstChild) wrap.removeChild(wrap.firstChild)

Why not wrap.innerHTML = '' or similar?
The while loop poses a problem if you are, e.g., ensuring that data refreshes probably -- since it will clear out anything you subsequently put into the element.