Vanilla JavaScript alternatives to jQuery functions

Vanilla JavaScript alternatives to jQuery functions

Created:18 Apr 2022 15:05:28 , in  Web development

JQuery has conquered the frontend web development world since it was first released many years ago. Even today, in year 2022, the library, and libraries influenced by it, like $cash, still can be found across fronted code bases.

However, even though it' been a slow process, web developers have been trying to wean themselves off jQuery for a good couple of years now. The process has trully kicked off with the release of ECMAScript 2015 (also known as ES6) specification and advent and wider adoption of more modern alternatives to jQuery like React, Vue.js or Angular.

In this post I take a brief look at what functionality you as a front end developer might no longer need jQuery for.

Selecting elements


// using HTML5 DOM API

Dom manipulation

Appending content to an element

$("selectorName").append( "content")

// vanilla JavaScrpt
let element = document.querySelector('selectorName');
let text = document.createTextNode("content");

Adding a class name to an element

// vanilla JavaScript 
let element = document.querySelector("selectorName");


$('selectorName').on('click',function(e) {
    //do something

// vanilla JavaScript
let clickedMe = document.querySelector('button');
clickedMe.addEventListener('click', (e) => {
    //do something

HTTP requests

  url: '',
  type: 'GET'
  success: (response) => {
  error: (errors) => {

// vanilla JavaScript
    method: 'GET',
    headers: {'Content-Type': 'application/json'},
  .then(response => response.json())
  .catch(error => console.log(error))


// jQuery

// vanilla JavaScript
    animation-name: animated;

@keyframes animated{
  0% {
    opacity: 0;

  70% { 
    opacity: 1;
  100%  {
    opacity: 0;


Even today jQuery is not dead, the project has not been discontinued and there are many, many plugins for it. However, with every new JavaScript specification release and adoption there is less and less jQuery can offer one can't achieve using vanilla JavaScript. So, next time while thinking of writing something new, think if it can be done without jQuery before reaching for $.

This post was updated on 27 Apr 2022 22:33:03

Tags:  grunt ,  JavaScript 

Author, Copyright and citation


Sylwester Wojnowski

Author of the this article - Sylwester Wojnowski - is a sWWW web developer. He has been writing computer code for the websites and web applications since 1998.


©Copyright, 2024 Sylwester Wojnowski. This article may not be reproduced or published as a whole or in parts without permission from the author. If you share it, please give author credit and do not remove embedded links.

Computer code, if present in the article, is excluded from the above and licensed under GPLv3.


Cite this article as:

Wojnowski, Sylwester. "Vanilla JavaScript alternatives to jQuery functions." From sWWW - Code For The Web .

Add Comment

Allowed BB Code - style tags: [b][/b], [i][/i], [code=text][/code],[code=javascript][/code],[code=php][/code],[code=bash][/code],[code=css][/code],[code=html][/code]

I constent to processing my data given through this form for purposes of a reply by the administrator of this website.

Recent Comments

Nobody has commented on this post yet. Be first!