How to add a parameter to the URL in JavaScript ?
Given a URL the task is to add parameter (name & value) to the URL using JavaScript.
URL.searchParams: This read-only property of the URL interface returns a URLSearchParams object providing access to the GET-decoded query arguments in the URL.
Approach 1: Using the append method
In this approach, we can use the URLSearchParams
interface to easily append or set parameters to a URL. The append
method allows us to add a new parameter to the existing set.
Example: This example adds the parameter by using the append method. This HTML document displays a webpage with a button. When the button is clicked, the JavaScript function GFG_Fun()
appends a new parameter (‘param_1’ with the value ‘val_1’) to the URL and updates the displayed URL accordingly.
html
<!DOCTYPE HTML>
< html >
< head >
< title >
How to add a parameter to the URL
</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;" >
</ p >
< button style = "cursor: pointer;" onclick = "GFG_Fun()" >
Add Parameter
</ button >
< p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;" >
</ p >
< script >
let up = document.getElementById('GFG_UP');
up.innerHTML = url;
let down = document.getElementById('GFG_DOWN');
function GFG_Fun() {
url.searchParams.append('param_1', 'val_1');
down.innerHTML = url;
}
</ script >
</ body >
</ html >
|
Output:
Approach 2: Using set method
In this approach, we leverage the URL
object and its searchParams
property to directly set a new parameter without the need for creating a separate URLSearchParams
object.
Example: In this HTML document, a webpage is presented with a button. Upon clicking the button, the JavaScript function GFG_Fun()
uses the set
method to update the URL parameter (‘param_1’) to a new value (‘val_1’), and then it dynamically displays the updated URL on the webpage.
html
<!DOCTYPE HTML>
< html >
< head >
< title >
How to add a parameter to the URL
</ title >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;" >
</ p >
< button style = "cursor: pointer;" onclick = "GFG_Fun()" >
Add Parameter
</ button >
< p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;" >
</ p >
< script >
let up = document.getElementById('GFG_UP');
up.innerHTML = url;
let down = document.getElementById('GFG_DOWN');
function GFG_Fun() {
url.searchParams.set('param_1', 'val_1');
down.innerHTML = url;
}
</ script >
</ body >
</ html >
|
Output:
Last Updated :
15 Jan, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...