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.
Table of Content
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
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'); let url = new URL("https://www.geeksforgeeks.org"); 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
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'); let url = new URL("https://www.geeksforgeeks.org"); 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:
