Open In App

How to add a parameter to the URL in JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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');
            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:

parameter

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');
            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:

parameter



Last Updated : 15 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads