Vanilla JS equivalents of jQuery methods

gistfile1.md

jQuery	Vanilla
$(document).ready(function() { });	document.addEventListener("DOMContentLoaded", function() { });
var divs = $("div");	var divs = document.querySelectorAll("div");
var newDiv = $(" ");	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($("

"));

// 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.