Converting jQuery object to vanilla JS

Maybe you’re in the process of changing all your code from jQuery to plain JavaScript. Maybe you’re just using both.

But anyway, this means that in many cases your code should support both jQuery and vanilla JS elements. This is why we need a way to align and know what kind of element we are facing.

Fortunately, there’s a simple way to convert a jQuery object into a vanilla JS DOM element:

if (element instanceof jQuery) {
	element = element[0];
}

(Change element with the correct object you want to convert).

This code can be very useful in many situations.

For example, in functions.

You can add these lines of code to the beginning of your functions that should support both jQuery and vanilla JS elements.

This will make sure that the element passed to the function is now a standard DOM element. Thus, you will only use vanilla JS commands in the rest of the function.

For instance:

function doSomething(element) {
	// If this is a jQuery element,
	// convert it to vanilla JS.
	if (element instanceof jQuery) {
		element = element[0];
	}

	// Continue with vanilla JS syntax.
}