How to Pass Over an Element Using TypeScript and jQuery ?
Last Updated :
24 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 change the element id using jQuery ?
The jQuery methods are used to change the element ID which are described below: jQuery attr() Method: This method set/return attributes and values of the selected elements. If this method is used to return the attribute value, it returns the value of first selected element. If this method is used to
3 min read
How to get the outer html of an element using jQuery ?
Sometimes, there is a need to get the entire HTML element by its id and not merely its contents, for doing so, we shall use the HTML DOM outerHTML Property to get the outer HTML of HTML element. Syntax: document.getElementById("your-element-id").outerHTML) You can use a variable and initialize it to
2 min read
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 execute TypeScript file using command line?
TypeScript is a statically-typed superset of JavaScript that adds optional type annotations and compiles to plain JavaScript. It helps catch errors during development. To execute a TypeScript file from the command line, compile it using tsc filename.ts, then run the output JavaScript file with node.
2 min read
How to test the id of an element using Protractor ?
Protractor is an end-to-end test framework developed for Angular and AngularJS applications. It runs tests against the application interacting with it as a real user would, running in a real browser. In this article, we are going to test the id of an element. Pre-requisite: Installation and Setup of
2 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 get the type of DOM element using JavaScript ?
The task is to get the type of DOM element by having its object reference. Here we are going to use JavaScript to solve the problem. Approach 1: First take the reference of the DOM object to a variable(Here, In this example an array is made of IDs of the element, then select random ID and select tha
2 min read