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
How to Use Fetch in TypeScript ? In TypeScript, fetching the data from any server or API using fetch() API is not the same as we used to do it in Plain or Vanilla JavaScript. Let us see how we can use the fetch API to fetch data from any server or API in TypeScript.NOTE: Before using this code, please make sure that you have jQuery
4 min read
jQuery UI dialog option() Method This action gets an object containing key/value pairs representing the current dialog options hash. This method does not accept any argument Syntax: var a = $( ".selector" ).dialog("option"); Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/
1 min read
jQuery | $.proxy() Method The $.proxy() Method in jQuery accepts an existing function and returns a new one with a particular context. Generally, it is used for attaching events to an element where the context is pointing back to a different object. Syntax: $(selector).proxy(function, context) $(selector).proxy(context, name
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