How to Pass Over an Element Using TypeScript and jQuery ?
Last Updated :
28 Apr, 2025
This article will show how we can pass an HTML element to a function using jQuery and TypeScript together. There are different ways available in which we can pass an element to a function using TypeScript and jQuery as listed below.
Before moving on to the implementation, make sure that you have jQuery installed in your project environment. Use the below commands to install and use jQuery.
npm commands to install jQuery:
npm install jquery
npm install --save-dev @types/jquery
Once jQuery gets installed in your project use the below command to import and use it in your TypeScript file.
import variable_name_by_which_you_want_to_import_jQuery from 'jquery'
Using HTMLElement as the passing element type
In this approach, we will assign the HTMLElement type to the parameter while declaring the function and then use it as an element inside that function.
Syntax:
function funcName(paramName: HTMLElement){
// Function statements
}
funcName(selectedElement[0]);Example: The below code example passes the element as an HTMLElement type to the function and uses it as an element inside it.
JavaScript
// index.ts file
import $ from "jquery";
declare var global: any;
global.jQuery = $;
import "jquery-ui";
const changeText = (passedElement: HTMLElement) => {
$(passedElement).text(`
The text has been changed by passing
element to function using the TypeScript
and jQuery.
`);
}
$('#btn').on('click', function () {
const selectedElement = $('#result')[0];
changeText(selectedElement);
})
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
.h1 {
font-size: 30px;
color: green;
}
#result {
color: #FF671F;
}
</style>
</head>
<body>
<center>
<h1 class="h1">
GeeksforGeeks
</h1>
<h3 id="result">
Click the below button
to change the this text.
</h3>
<button id="btn">
Change Text
</button>
</center>
</body>
</html>
Output:
Using any as the passing element type
In this approach, we will use the any type to declare the element parameter inside the function declaration and use it as an element inside that function.
Syntax:
function funcName(paramName: any){
// Function Statements
}
funcName(selectedElement[0]);Example: The below example uses the any type for the passing element parameter.
JavaScript
// index.ts file
import $ from "jquery";
declare var global: any;
global.jQuery = $;
import "jquery-ui";
const changeText = (passedElement: any) => {
$(passedElement).text(`
The text has been changed by passing
element to function using the TypeScript
and jQuery.
`);
}
$('#btn').on('click', function () {
const selectedElement = $('#result')[0];
changeText(selectedElement);
})
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
.h1 {
font-size: 30px;
color: green;
}
#result {
color: #FF671F;
}
</style>
</head>
<body>
<center>
<h1 class="h1">
GeeksforGeeks
</h1>
<h3 id="result">
Click the below button
to change the this text.
</h3>
<button id="btn">
Change Text
</button>
</center>
</body>
</html>
Output:
Using JQuery as the passing element type
In this method, the JQuery will be assigned as the element type of the parameter at the time of function declaration and the element will be directly selected and passed to the function without specifying the first array item.
Syntax:
function funcName(paramName: JQuery){
// Function Statement
}
funcName(selectedElement);Example: The below code example helps you understand the use of JQuery type to pass an element to the function.
JavaScript
// index.ts file
import $ from "jquery";
declare var global: any;
global.jQuery = $;
import "jquery-ui";
const changeText = (passedElement: JQuery) => {
$(passedElement).text(`
The text has been changed by passing
element to function using the TypeScript
and jQuery.
`);
}
$('#btn').on('click', function () {
const selectedElement = $('#result');
changeText(selectedElement);
})
<!-- index.html file -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>Document</title>
<style>
.h1 {
font-size: 30px;
color: green;
}
#result {
color: #FF671F;
}
</style>
</head>
<body>
<center>
<h1 class="h1">
GeeksforGeeks
</h1>
<h3 id="result">
Click the below button
to change the this text.
</h3>
<button id="btn">
Change Text
</button>
</center>
</body>
</html>
Output:
Similar Reads
How to use jQuery with TypeScript ? In this article, we will learn how we can use jQuery with TypeScript and implement the features of both languages. The below approach can be used to implement jQuery in TypeScript. By installing jQuery using the npm commandThe jQuery can be installed in your current TypeScript project folder using t
2 min read
How to use jQuery Each Function in TypeScript ? jQuery is a JavaScript library that can be integrated with TypeScript and the features of both can be used together to enhance the interactivity of the application. In this post, we will learn, how we can use each() method of jQuery in TypeScript with its practical implementation. Before going to th
2 min read
Show And Hide Password Using TypeScript Managing password visibility in web applications enhances user experience by allowing users to toggle between hidden and visible passwords. TypeScript provides strong type safety and better maintainability for implementing this feature.What We Are Going to CreateWe’ll build an application that allow
4 min read
How to Get an Object Value By Key in TypeScript In TypeScript, we can get an object value by key by accessing the specific properties within the objects of the dynamic type. This can be done using Dot Notation, Bracket Notation, and Optional Chaining. In this article, we will explore all these approaches along with their implementation in terms o
5 min read
How to get Function Parameters from Keys in an Array of Objects Using TypeScript ? In TypeScript, we can extract the function parameters from keys in an array of objects by going through object properties dynamically. We can use Generics and Type Assertion to get Function Parameters from Keys in an Array of Objects Using TypeScript. Below are the possible approaches: Table of Cont
3 min read
How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche
2 min read
How to work with Form Elements in TypeScript ? When developing web applications, forms serve as essential components for collecting user input. Form elements can be called the building blocks of a form. They allow users to provide input, make selections, and interact with the application, enabling various functionalities such as data submission,
3 min read
How to Explicitly Set a New Property on Window in TypeScript ? In TypeScript, the window object represents the global window in a browser environment. It provides access to various properties and methods related to the browser window. You can set a new custom property on this window object using the below approaches. Table of Content By extending the window int
2 min read
How to use property decorators in TypeScript ? Decorators are a way of wrapping an existing piece of code with desired values and functionality to create a new modified version of it. Currently, it is supported only for a class and its components as mentioned below: Class itselfClass MethodClass PropertyObject Accessor ( Getter And Setter ) Of C
4 min read
How to use Spread Operator in TypeScript ? The spread operator in Typescript, denoted by three dots (`...`), is a powerful tool, that allows you to spread the elements of an array or objects into another array or objects. This operator makes it easy to copy arrays, combine arrays, or create shallow copies of iterable.Syntax...operatingValueE
3 min read