Sign in

Conversions from jQuery to Vanilla JS

This article is to learn the conversions from jQuery to Vanilla JS*, and I picked up some of them which are frequently used. Also I also added some code examples as well.

*Vanilla JS… vanilla JS is means JavaScript without any frameworks or libraries. People also call it “pure JavaScript”.

But before get started, let’s do a quick review what JavaScript and jQuery :)

Javascript is a programming language for websites and makes them have dynamic moves. It can control and manipulate your HTML, CSS, and data on your website. Here is a good example: If HTML is things structure your body, and CSS is your clothes and makeup you wear, Javascript is your brain.

jQuery is a library* for JavaScript and it makes easier to use JavaScript on your website. Compared to pure JS code, the code with jQuery is much shorter and simpler. The motto of jQuery is “Write less, do more”. You can see it when you learn the code. jQuery makes your code short, however, the demand has been getting less and less because of the current popular frameworks like React and Vue. js, and some more reasons.

  • The meaning of “library” in programming…In computer science, a library is a collection of precompiled parts/files that a program can use. In this case, jQuery has parts that makes your JavaScript code easier and simpler.

Alright, now we are ready to take a look at the conversions below.

  1. When selecting elements

▹ id

//jQuery
$("#idName")
//Vanilla JS
document.getElementById("idName")

▹ tag

//jQuery
$("div")
//Vanilla JS
document.getElementsByTagName("div")

▹ class

//jQuery
$(".className")
//Vanilla JS
document.getElementsByClassName("className")

▹ parent

//jQuery
$("#idName").parent()
//Vanilla JS
document.getElementById("idName").parentNode

▹ sibling

//jQuery
$("#idName").next()
//Vanilla JS
document.getElementById("idName").nextSibling

Here is the example of the id selector:

<!— HTML —>
<body>
<p>Doughnuts</p>
<p id="sweet2">Chocolates</p>
<p>Apple Pies</p>
</body>
<!— jQuery —>
<script>
$(document).ready(function(){
var sweet = $("#sweet2");
alert(sweet.html());
});
</script>
<!— Vanilla JS—>
<script>
let sweet = document.getElementById("sweet2");
alert(sweet.innerHTML);
</script>

The result:

As the page is read, it shows the alert box with the content selected by its id. It’s created by alert() method and html() method / innerHTML property.

And another example with the next selector:

<!—- HTML —->
<body>
<span id="nextSweet">Cookies </span><span>Caramel </span><span>Fudge </span> <br/>
</body>
<!—- jQuery -—>
<script>
$(document).ready(function(){
var sweet2 = $("#nextSweet").next();
alert(sweet2.html());
});
</script>
<!—- Vanilla JS-—>
<script>
let sweet2 = document.getElementById("nextSweet").nextSibling;
alert(sweet2.innerHTML);
</script>

The result:

It shows the alert box with the next one of the content selected by its id.

<Some Tips>

  • What is the $ sign in jQuery? …It is a shortcut for “jQuery”. Writing $(”#idName”) and jQuery(“#idName”) are the same and both work on your file.
  • Maybe you already noticed, but see the word “Element” in each getElement~ method. For id, the word is singular and others are plural. getElementById(), getElementsByTagName(), and getElementsByClassName(). If you already know how id, tag and class work, you can see why it’s singular and plural, but it can be a little tricky when you explain your code and when you need to write your code down. Be careful especially for who are not English native, like me!
  • And as you can see, you don’t need # and . in pure JS.

2. Events

In vanilla JS, you need the addEventListener() method to execute the events.

▹ ready

// jQuery
$(document).ready(function() {
alert("This is jQuery!");
});
//Vanilla JS
document.addEventListener("DOMContentLoaded", () => {
alert("This is vanilla JS!");
});

▹ click

// jQuery
$("#idName").click(function(){
// write what you want to apply
});
//Vanilla JS
document.getElementById("idName").addEventListener("click", () => {
// write what you want to apply
});

▹ change

// jQuery
$("#idName").change(function(){
// write an what you want to apply
});
//Vanilla JS
document.getElementById("idName").addEventListener("click", () => {
// write what you want to apply
});

▹ mouse over

// jQuery
$("#idName").mouseover(function(){
// write an what you want to apply
});
//Vanilla JS
document.getElementById("idName").addEventListener("mouseover", () => {
// write an what you want to apply
});

Here is the example of the click event:

<!—- HTML -—>
<body>
<button id="btn">Click here</button>
<div id="changeColor">Color changes</div>
</body>
<!—- jQuery -—>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#changeColor").css("color", "salmon");
});
});
</script>
<!— Vanilla JS—>
<script>
document.getElementById("btn").addEventListener("click", () => {
document.getElementById("changeColor").style.color = "salmon";
});
</script>

The result:

Before clicked
After clicked. As the button is clicked, EventListener receives the event and the function(callback function) is called.

<Some Tips>

  • What is addEventListener()? … addEventListener() is the method which sets up EventListener (a function execute an event). EventListenerallows us to listen to an event happening in a web page. When the event fires, it executes a callback function. Events here means things/actions which occur on HTML pages.
  • DOMContentLoaded?… The DOMContentLoadedevent is triggered when the HTML document is completely loaded and analyzed without waiting for stylesheets, images, and subframes(like iframe) to be loaded. There is also the similar event load. This events fires when everything including stylesheets, images and subframes are completely loaded.
  • DOM?… DOM(Document Object Model) is an API(Application Programming Interface) and it’s a structure and a way that HTML and XML documents are manipulated.

3. Class

▹ toggle

// jQuery
$("#idName").toggleClass("className")
//Vanilla JS
document.getElementById("idName").classList.toggle("className")

▹ add

// jQuery
$("#idName").addClass("className")
//Vanilla JS
document.getElementById("idName").classList.add("className")

▹ remove

// jQuery
$("#idName").removeClass("className")
//Vanilla JS
document.getElementById("idName").classList.remove("className")

Example of adding the class:

<!—- HTML -—>
<body>
<h2 id="addClass">Hello World</h2>
<button id="button">Click here</button>
</body>
<!-- CSS -->
<style>
.styleh2 {
background: aqua;
}
</style>

<!-— jQuery —->
<script>
$(document).ready(function(){
$("#button").click(function({
$("#addClass").addClass("styleh2");
});
});
</script>

<!—- Vanilla JS —->
<script> document.getElementById("button").addEventListener("click", () => {
document.getElementById("addClass").classList.add("styleh2");
});
</script>

The result:

Before clicked
After clicked

<Tip>

  • classList?… It is a property that returns the class name(s) of an element.

4. Manipulate HTML

▹ append

// jQuery
$("body").append($("<h2/>"))
//Vanilla JS
document.body.appendChild(document.createElement("h2"))

▹ remove

// jQuery
$("#idName").remove()
//Vanilla JS
document.getElementById("idName").remove()

▹ create

// jQuery
$("<div/>")
//Vanilla JS
document.createElement("div")

The example of the append method:

<!—- HTML -—>
<body>
<p>Food I need to buy</p>
<ul id="shoppingList">
<li>Bananas</li>
<li>Milk</li>
</ul>
<button id="appendBtn">Click here</button>
</body>
<!-— jQuery —->
<script>
$(document).ready(function(){
$("#appendBtn").click(function(){
$("#shoppingList").append("<li>Eggs</li>");
});
});
</script>
<!—- Vanilla JS —->
<script>
let appendNewList = () => {
let node = document.createElement("li");
let textnode = document.createTextNode("Eggs");
node.appendChild(textnode);
document.getElementById("shoppingList").appendChild(node)
};
document.getElementById("appendBtn").addEventListener("click",
appendNewList);
</script>

The result:

Before clicked
After clicked. The list “Eggs” is added.

Tired? Almost done! Here is the last example with the remove method:

<!—- HTML -—>
<body>
<p>I'll stay here</p>
<p id="removeP">I'll leave</p>
<button id="removeBtn">Click here</button>
</body>
<!-— jQuery —->
<script>
$(document).ready(function(){
$("#removeBtn").click(function(){
$("#removeP").remove();
});
});
</script>
<!—- Vanilla JS—->
<script>
document.getElementById("removeBtn").addEventListener("click", function(){
document.getElementById("removeP").remove();
});
</script>

The result:

Before clicked
After clicked. The element with the id “removeP” is removed.

Thank you so much for reading. I carefully checked the code and everything, but please let me know if there are any mistakes or misunderstandings (English mistakes as well). I’m new to programming / coding, and Strict feedbacks with love are also more than welcome :)

Resources:

Currently learning web development in Canada.