Vanilla JS equivalent of common jQuery functions

in javascript

Here's the vanilla (plain) Javascript versions of some common jQuery functions. I put this cheat-sheet together when I was refactoring some old code and needed to remove jQuery from my code.

Selecting and $.find()

Use querySelector (or querySelectorAll).

// jQuery
var el = $(".hello");

// vanilla
const el = document.querySelector(".hello");

// jquery
$(el).find("input");

// vanilla
el.querySelector("input");

$.prop()

Just use or set the attribute directly:

// jQuery
var $el = $(".form");
$el.find(".input").prop("disabled", true);

// vanilla
const el = document.querySelector(".form");
el.querySelector(".input").disabled = true;

$.parent()

Use parentElement

// jQuery
var $parent = $(".child").parent();

// vanilla
const parent = document.querySelector(".child").parentElement;

$.data()

Use .dataset

<div class="info" data-some-data="12" />;

// jQuery
var info = $(".info").data("some-data"); // 12

// vanilla
const info = document.querySelector(".info").dataset.someData; // 12

Note that dataset transforms the names from hypenated to camelCase, similar to how CSS is treated in JS.

$.remove()

Use .remove(). This won't work in any version of Internet Explorer but does exist in Edge, so for IE removeChild is the one to use.

// jQuery
$(".goAway").remove();

// vanilla
const el = document.querySelector(".goAway").remove();

$.addClass() / $.removeClass() / $.toggleClass() / $.hasClass()

Use classList

// jQuery
$(".is-active").removeClass("is-active");
$(".homepage").addClass("is-active");
$(".homepage").toggleClass("is-active");
$(".homepage").hasClass("is-active");

// vanilla
document.querySelector(".is-active").classList.remove("is-active");
document.querySelector(".homepage").classList.add("is-active");
document.querySelector(".homepage").classList.toggle("is-active");
document.querySelector(".homepage").classList.contains("is-active");

$.show() / $.hide()

Edit the CSS 'display' property:

// jQuery
$(".hideMe").hide();
$(".showMe").show();

// vanilla
document.querySelector(".hideMe").style.display = "none";

// use inherit so that your CSS controls block/flex/inline-block etc
document.querySelector(".showMe").style.display = "inherit";

$.empty()

Loop over element's children and remove them.

// jQuery
$(".content").empty();

// vanilla
const el = document.querySelector(".content");

// you can either loop
while (el.firstChild) {
  el.removeChild(this.el.firstChild);
}

// or reset innerHTML
// but this is slower and can sometimes cause issues with painting/listeners
el.innerHTML = "";

$.append()

This is slightly complicated! There are three options:

  1. appendChild: Create an element, add content to it, then append to your parent element.
  2. innerHTML: Immediately adds HTML, but removes any existing content and event handlers. Not recommended.
  3. DOMParser: IE10+, can handle complex templates and nested markup from a string.

Vanilla .append() will just add a string, not markup.

// jQuery
$(".el").append("<div>hello</div>");

// vanilla

// 1. appendChild
let first = document.createElement("p");
first.innerHTML = "hello";
el.appendChild(first); // 'first' needs to be an existing element, can't be a string

// 2. innerHTML
this.innerHTML = "<div>hello</div>"; // will remove any existing content

// 3. DOMParser - IE10+, faster than innerHTML
var markup = "<div><p>text here</p></div>";
var parser = new DOMParser();
var content = parser.parseFromString(markup, "text/html");
// DOMParser returns HTMLDoc, so need to get first child [0] and append that
el.appendChild(content[0]);