Vanilla JavaScript vs jQuery Documentation

Use this reference when you want to replace familiar jQuery helpers with the browser APIs already built into modern JavaScript.

Every entry keeps the same rhythm: what jQuery abstracts, the native API you reach for instead, and the official documentation link you can open when edge cases matter.

Best for

Incremental migrations, code reviews, and translating chained jQuery calls into explicit DOM steps.

What changes

The biggest mental shift is being explicit about collections, loop boundaries, and which DOM node you mutate.

Scope

This page focuses on the helpers teams replace most often. It is a practical reference, not a full mirror of the jQuery API.

How to use this reference

Search by task, API name, or tag, then narrow the list with the category chips. Keep the matching section open while you replace one behavior at a time in your own component or template.

Tip: If the jQuery version operates on many elements, decide first whether the vanilla version should still touch all matches or whether you really only need the first node.

Core mental model

JavaScript works directly with DOM nodes and browser APIs. jQuery wraps those nodes in a chainable collection API that used to smooth over browser inconsistencies.

When you migrate away from jQuery, the main shift is to be explicit: query the element, choose the DOM property or method you need, and loop only when you truly have multiple matches.

Selection and traversal

Start here when you need to locate elements, move through parents and siblings, or narrow a set of matches before changing the DOM.

Select Elements

// jQuery to select all instances of class "select"
$(".select");

// JavaScript to select only the first instance of class "select"
document.querySelector(".select");

// To select all the instances of class "select"
document.querySelectorAll(".select");

More selector patterns

Select Elements:

jQuery:

// Syntax
jQuery();
$(); // Shortcut

// Example
// Selects all the links among the descendants of the 'my-class' class.
jQuery('.my-class a');
$('.my-class a');
$("html") // To select the entire html.
$("body") // To select the entire html body.

See more in the jQuery API docs: jQuery() global function

JavaScript:

// Syntax
document.querySelectorAll();

// Example
document.querySelector(selector)
document.querySelector('.my-class a')
document.body

See more in the DOM API docs: .querySelectorAll() method.

Select First Element

jQuery:

// Syntax
.first();

// Example
$('.my-class a').first();

See more in the jQuery API docs: first() method.

JavaScript:

// Syntax
document.querySelector();

// Example
document.querySelector('.my-class a');

See more in the DOM API docs: .querySelector() method.

Find Elements

jQuery:

// Syntax
.find();

// Example
// Find all the span tags that are descendants of links within the 'my-class' class.
// Note: searches for all descendants not just for children.
$('.my-class a').find('span');
$('.my-class a').find('span').css('color', 'red');

See more in the jQuery API docs: .find() method.

JavaScript:

// Syntax
// To find the first element (also if there's only one)
document.querySelector();

// To find all elements
document.querySelectorAll();

// Example
// At first querySelectorAll() returns a NodeList, so we have to loop through it to find all the span tags we want.
// For the sake of testing, I made the selected elements red, you can find the 'style.color' property below in this cheat sheet.

// finds all '.my-class a'
let nodes = document.querySelectorAll('.my-class a');

// loops through all '.my-class a'
for (let i = 0; i < nodes.length; i++) {

  // checks if the individual '.my-class a' element has a
  // 'span' descendant to avoid 'undefined' error
  if (nodes[i].querySelector('span')) {
    // colors span tags that are desdendants of '.my-class a'
    nodes[i].querySelector('span').style.color = 'red';
  }
}

See more in the DOM API docs: .querySelector() method, .querySelectorAll() method.

Select Children

jQuery:

// Syntax
.children();
.children('selector');

// Example
// Finds all the children of all '.my-class a' elements on the age
// Finds all the 'span' elements that are the children of any '.my-class a' element on the page
// Note: searches only for children (first-level of descendants)
$('.my-class a').children();
$('.my-class a').children('span');
$('.my-class a').children('span').css('color', 'blue'); // for testing

See more in the jQuery API docs: .children() method.

JavaScript:

// Syntax
parentNode.children;

// Example
// 2nd example of the jQuery version above, plus makes the selected span tags blue for the sake of easy testing.
// for 1st example, only leave out the if check at the end (we need this because the JS version is not a method but a property, so we need to check which children are 'span')
// selects all the elements with 'my-class a' on the page
let items = document.querySelectorAll('.my-class a');
// loops through all the elements with '.my-class a'
for (let i = 0; i < items.length; i++) {
  // finds the children of the current '.my-class a' element
  let kids = items[i].children;
  // loops through the children of the current '.my-class a' element
  for (let j = 0; j < kids.length; j++) {
    // checks if the child element is a span tag
    if (kids[j].tagName == 'SPAN') {
      kids[j].style.color = 'blue';
    }
  }
}

See more in the DOM API docs: .children property

Select Parent

jQuery:

// Syntax
.parent();

// Example
// Selects the parent elements of ALL elements with 'my-class a' on the page.

$('.my-class a');

See more in the jQuery API docs: .parent() method

JavaScript:

/* Syntax */
Node.parentNode;

// Example
// Selects the parent of the FIRST element with 'my-class a' on the page (for the sake of less repetition)
// For looping through all '.my-class a' elements, use the looping solution and querySelectorAll() from the two examples above.

let item = document.querySelector('.my-class a');
item.parentNode;

See more in the DOM API docs: .parentNode property.

Select Siblings

jQuery:

// Syntax
.siblings();

// Example
// Selects the siblings of ALL elements with the 'find-siblings' class on the page.

$('.find-siblings').siblings();

See more in the jQuery API docs: .siblings() method.

JavaScript:

// Syntax
Node.parentNode.querySelectorAll(":not(#elem)");

// Example
// Selects the siblings of the FIRST element with the 'find-siblings' class.
// For looping through all 'find-siblings' elements, see examples #3
// and #4 the ':scope' pseudoclass is necessary for preventing the child elements
// of 'item' from being selected (otherwise querySelectorAll() searches through all descendants
// of 'item', with ':scope >' it loops through just the first level).
let item = document.querySelector('.find-siblings');
let siblings = item.parentNode.querySelectorAll(':scope > :not(.find-siblings)');

See more in the DOM API docs: .parentNode property, .querySelectorAll() method, :scope pseudo-class

Select Next Sibling

jQuery:

//Syntax
.next();

// Example
// Selects the next siblings of all elements with 'my-class a' on the page.
$('.my-class a').next();

See more in the jQuery API docs: .next() method.

JavaScript:

//Syntax
nonDocumentTypeChildNode.nextElementSibling;

// Example
// For declaring the 'item' variable by selecting elements with
// 'my-class a' on the page, see examples #3, #4, #5.
item.nextElementSibling;

See more in the DOM API docs: .nextElementSibling property.

Select Previous Sibling

jQuery:

// Syntax
.prev();

// Example
// Selects the previous siblings of all elements with 'my-class a' on the page.
$('.my-class a').prev();

See more in the jQuery API docs: .prev() method.

JavaScript:

// Syntax
nonDocumentTypeChildNode.previousElementSibling;

// Example
// For declaring the 'item' variable by selecting elements with 'my-class a' on the page, see examples examples #3, #4, #5.
item.previousElementSibling;

See more in the DOM API docs: .previousElementSibling property.

Classes and attributes

Use these patterns when UI state lives in classes, attributes, or accessibility markers that must stay synchronized with the DOM.

Add Class

jQuery:

// Syntax
.addClass();

// Example
// Adds the 'second-class' class to every 'my-class' element.
$('.my-class').addClass('second-class');

See more in the jQuery API docs: .addClass() method.

JavaScript:

// Syntax
// Example
// For declaring the 'item' variable by selecting elements with'my-class' on the page, see examples examples #3, #4, #5.
item.classList.add('second-class');

See more in the DOM API docs: .classList property and .add() method

Remove Class

jQuery:

// Syntax
.removeClass();

// Example
// Removes the 'second-class' class from every 'my-class' element.
// Removes 'second-class', then add 'third-class' to every 'my-class' element.
$('.my-class').removeClass('second-class');
$('.my-class').removeClass('second-class').addClass('third-class');

See more in the jQuery API docs: .removeClass() method.

JavaScript:

// Syntax
Element.classList.remove();

// Example
// For declaring the 'item' variable by selecting elements with 'my-class' on the page, see examples examples #3, #4, #5.

item.classList.remove('second-class');

// To use it together with add(), you need two separate statements.
item.classList.remove('second-class');
item.classList.add('third-class');

See more in the DOM API docs: .classList property, .remove() method.

Toggle Class

jQuery:

// Syntax
.toggleClass();

// Example
// Adds the 'active' class to elements with 'my-class' if they don ' have it remove it if they have it.
$('.my-class').toggleClass('active');

See more in the jQuery API docs: .toggleClass() method.

JavaScript:

// Syntax
Element.classList.toggle();

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.classList.toggle('active');

See more in the DOM API docs: .classList property, .toggle() method.

Has Class

jQuery:

// Syntax.
.hasClass();

// Example
// Checks if any element with 'my-class' has the 'active' class.
// Returns true or false
// If there's at least one element with 'active' it's true, otherwise false.
$('.my-class').hasClass('active');

See more in the jQuery API docs: .hasClass() method.

JavaScript:

// Syntax
element.classList.contains();

// Example
// Similar to the jQuery version, this one also checks if any element in the whole classList has the 'active' class
// If at least one element has 'active', it's true, otherwise false.
// For declaring the 'item' variable, see examples #3, #4, #5.
item.classList.contains('active');

See more in the DOM API docs: .classList property, .contains() method.

Get Attribute

jQuery:

// Syntax
.attr('attr-name');

// Example
// Returns the value of the href property of the FIRST occurrence of an element with 'my-class'
$('.my-class').attr('href');

See more in the jQuery API docs: .attr() method.

JavaScript:

/* Syntax */
Element.getAttribute('attr-name');

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.getAttribute('href');

See more in the DOM API docs: .getAttribute() method.

Set Attribute

jQuery:

// Syntax
.attr('attr-name', value);

// Example
// Sets the value of the href property for ALL contact links that have the 'contact-link' class
$('.contact-link').attr('href', 'contact.html');

See more in jQuery API docs: .attr() method (you need to use the same .attr() method as for getting an attribute value, but with two parameters instead of one)

JavaScript:

// Syntax
Element.setAttribute();

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.setAttribute('href', 'contact.html');

See more in the DOM API docs: .setAttribute() method.

Remove Attribute

jQuery:

// Syntax
.removeAttr('attr-name');

// Example
// Removes 'target' attributes from contact links.
$('.contact-link').removeAttr('target');

See more in the jQuery API docs: .removeAttr() method.

JavaScript:

// Syntax
Element.removeAttribute();

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.removeAttribute('target');

See more in the DOM API docs: .removeAttribute() method.

Content, styles, and input state

These examples cover inserting markup, changing content, and updating inline state when a dedicated CSS class is not the right abstraction.

Append Content

jQuery:

//Syntax
.append('html-string');

// Example
// Appends an extra list element to the end of every ordered list on the page.
$("ol").append("<li>");

See more in the jQuery API docs: .append() method.

JavaScript:

// Syntax
Node.appendChild();

// Example
// For declaring the 'ol' variable, see examples #3, #4, #5.
ol.appendChild(document.createElement("li"));

See more in the DOM API docs: .appendChild() method and .createElement() method.

Prepend Content

jQuery:

// Syntax
.prepend('html-string');

// Example
// Prepends an extra list element to the beginning of every ordered list on the page.
$("ol").prepend("<li>");

See more in the jQuery API docs: .prepend() method.

JavaScript:

// Syntax
Node.insertBefore();

// Example
// For declaring the 'ol' variable, see examples #3, #4, #5.
ol.insertBefore(document.createElement("li"), ol.firstChild);

See more in the DOM API docs: .insertBefore() method, .createElement() method and firstChild property.

Get or Set HTML

jQuery:

// Syntax
.html();
.html('html-string');

// Example
// Gets the HTML content of the FIRST element that matches 'my-class'.
// Sets/resets the HTML content of EACH element that matches 'my-class'.
$('.my-class').html();
$('.my-class').html('<em>Hello</em>');

See more in the jQuery API docs: .html() method.

JavaScript:

// Syntax
Element.innerHTML;

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.innerHTML; // gets the value.
item.innerHTML = '<em>Hello</em>'; // sets the value.

See more in the DOM API docs: .innerHTML property.

Read or Write Inline Styles

jQuery:

// Syntax
.css('property-name');
.css('property-name', value);

// Example
// Gets the 'color' value of the FIRST element that has 'my-class'.
// Sets the 'color' value to 'white' for EVERY element that has 'my-class'.
$('.my-class').css('color');
$('.my-class').css('color', 'white');

See more in the jQuery API docs: .css() method.

JavaScript:

// Syntax
ElementCSSInlineStyle.style.propertyName = 'value';

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.style.color; // getting value
item.style.color = 'white'; // setting value

See more in the DOM API docs: .style property and CSS Properties Reference (for the JavaScript names of CSS properties)

Get or Set Text Content

jQuery:

// Syntax
.text();
.text('text');

// Example
// Gets the text content of the FIRST element (and all of its descendants) that matches 'my-class'.
// Sets/resets the text content of EACH element that matches 'my-class'.
$('.my-class').text();
$('.my-class').text('<em>Hello</em>');

See more in the jQuery API docs: .text() method.

JavaScript:

// Syntax
Element.textContent;

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.textContent; // gets the value
item.textContent = '<em>Hello</em>'; // sets the value

See more in the DOM API docs: .textContent property.

Get or Set Input Values

jQuery:

// Syntax
.val();
.val(val);

// Example
// Gets the value of the input with the 'name' name.
// Sets/resets the value of the input with the 'name' name.
$('input[name=name]').val();
$('input[name=name]').val('Marilyn Monroe');

See more in the jQuery API docs: .val() method.

JavaScript:

// Syntax
HTMLInputElement.value;

// Example
// For declaring the 'input' variable, see examples #3, #4, #5.
input.value; // gets the value
input.value = 'Marilyn Monroe'; // sets the value

See more in the DOM API docs: .value property (in the list of ''Properties that apply to any type of input element that is not hidden")

Visibility and events

Finish with the patterns that usually control interaction state: showing or hiding UI and wiring event handlers directly to the DOM.

Hide Element

jQuery:

// Syntax
.hide();

// Example
// Hides all elements with 'my-class'.
$('.my-class').hide();

See more in the jQuery API docs: .hide() method.

JavaScript:

// Syntax
ElementCSSInlineStyle.style.display = 'none';

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.style.display = 'none';

See more in the DOM API docs: .style property.

Show Element

jQuery:

// Syntax
.show();

// Example
// Displays all elements with 'my-class'.
$('.my-class').show()

See more in the jQuery API docs: .show() method.

JavaScript:

// Syntax
ElementCSSInlineStyle.style.display = '';

// Example
// For declaring the 'item' variable, see examples #3, #4, #5.
item.style.display = ''; // resets default.
item.style.display = 'block'; // sets display as block.
item.style.display = 'flex'; // sets display as flex.

See more in the DOM API docs: .style property.

Add Event Listener

jQuery:

// Syntax
.on();

// Example
// Adds or removes the 'active' class to/from all elements with '.submenu' when #toggle is clicked.
$('#toggle').on('click', function(){
  $('.submenu').toggleClass('active');
});

See more in the jQuery API docs: .on() method

JavaScript:

// Syntax
EventTarget.addEventListener('event', functionName);

// Example
// The code below only selects the FIRST element with the 'submenu' class.
// To select all submenus, use the 'for' loop in // Example #3 and #4.
let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");

toggle.addEventListener('click', function() {
  submenu.classList.toggle('active');
});

See more in the DOM API docs: .addEventListener() method and DOM Event Reference.

Remove Event Listener

jQuery:

// Syntax
.off();

// Example
// Removes the listed event handler when #toggle is clicked.
$('#toggle').off('click', function(){
  $('.submenu').toggleClass('active');
});

See more in the jQuery API docs: .off() method.

JavaScript:

// Syntax
EventTarget.removeEventListener('event', functionName);

// Example
// The code below only selects the FIRST element with the 'submenu' class.
// To select all submenus, use the 'for' loop in Example #3 and #4.
let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");

toggle.removeEventListener('click', function() {
  submenu.classList.toggle('active');
});

See more in the DOM API docs: .removeEventListener() method and DOM Event Reference.

JS vs jQuery

Reference map

Vanilla JavaScript vs jQuery Reference

How to use this reference

Core mental model

Selection and traversal

Select Elements

More selector patterns

Select First Element

Find Elements

Select Children

Select Parent

Select Siblings

Select Next Sibling

Select Previous Sibling

Classes and attributes

Add Class

Remove Class

Toggle Class

Has Class

Get Attribute

Set Attribute

Remove Attribute

Content, styles, and input state

Append Content

Prepend Content

Get or Set HTML

Read or Write Inline Styles

Get or Set Text Content

Get or Set Input Values

Visibility and events

Hide Element

Show Element

Add Event Listener

Remove Event Listener