Vanilla JavaScript Equivalent jQuery Tasks Replaced for Performance

Let’s be honest: jQuery has been a lifesaver. For years, it smoothed over the rough edges of cross-browser inconsistencies, particularly with older versions of Internet Explorer. But today, developers have plenty of vanilla javascript equivalents to jQuery for common tasks like selecting elements, handling events, manipulating classes, and updating the DOM. Writing $(‘#myElement’).hide() once felt like magic compared to the verbose native alternatives, but modern browsers now provide powerful APIs that can handle many of these tasks without relying on a library.

However, as we optimize for the mobile web, every kilobyte counts. Loading a 90KB library just to toggle a CSS class, select a few elements, or bind a simple click event is becoming harder to justify. Modern browsers have finally caught up to the standards, implementing powerful, native APIs that can handle most of the everyday tasks we previously relied on jQuery for.

Transitioning to “Vanilla” JavaScript isn’t just about shedding dead weight; it is about writing faster, more efficient code. Let’s break down some of the most common jQuery tasks and look at their clean, native JavaScript equivalents.

1. Selecting Elements

jQuery’s selector engine was legendary, but the native document.querySelector and document.querySelectorAll are now robust, widely supported (including IE8+), and all you need for 95% of use cases.

jQuery: $('.my-class') or $('#my-id')
Vanilla JS: document.querySelector('.my-class') or document.getElementById('my-id')

If you need a list of elements to iterate over, querySelectorAll is your best friend. It returns a NodeList. While it is not a true JavaScript Array, you can easily convert it into one using a classic trick:

var elements = document.querySelectorAll('.item');
var elementsArray = Array.prototype.slice.call(elements);
// Now you can use standard array methods
elementsArray.forEach(function(el) {
console.log(el);
});

2. Handling Events

Attaching event listeners in jQuery was straightforward, but native JavaScript gives you more granular control without the overhead of a library.

jQuery: $('#btn').on('click', function(e) { ... });
Vanilla JS: document.getElementById('btn').addEventListener('click', function(e) { ... });

The beauty of addEventListener is that you can attach multiple listeners to the same event on the same element without overwriting previous ones. You can also easily remove them later using removeEventListener, provided you pass a named function reference rather than an anonymous one.

3. Manipulating Classes

Adding, removing, or toggling CSS classes used to require jQuery’s .addClass() or .toggleClass(). Today, the classList API handles this beautifully. It is supported in all modern browsers and IE10+.

jQuery: $('#box').addClass('active');
Vanilla JS: document.getElementById('box').classList.add('active');

You also get .remove(‘active’) and .toggle(‘active’) right out of the box. It is readable, intuitive, and highly performant because it interacts directly with the DOM token list.

4. DOM Traversal and Manipulation

Appending content is a daily task. jQuery made it easy, but vanilla JS has a surprisingly elegant solution that is actually much safer than the old innerHTML += trick.

jQuery: $('#parent').append('Hello');
Vanilla JS: document.getElementById('parent').insertAdjacentHTML('beforeend', 'Hello');

Why is this better? Because using innerHTML += forces the browser to destroy and recreate all existing child elements inside that parent. This wipes out any event listeners attached to those children. insertAdjacentHTML parses the string and inserts it exactly where you want, leaving existing nodes and their listeners completely intact.

Making the Switch

Dropping jQuery for simple tasks forces you to learn how the browser actually works. You stop relying on a black box and start understanding the DOM, events, and native APIs. Your users benefit from faster page load times, especially on mobile networks, and less JavaScript for the browser to parse. If you are building a new project or optimizing an existing one, try replacing your usual jQuery workflows with native equivalents. You might be surprised at how simple it is.