Skip to content
Related Articles

Related Articles

Improve Article

How to add a parameter to the URL in JavaScript ?

  • Last Updated : 30 May, 2019

Given a URL and the task is to add an additional parameter (name & value) to the URL using JavaScript.

URL.searchParams: This readonly property of the URL interface returns a URLSearchParams object providing access to the GET decoded query arguments in the URL.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Syntax:

var URLSearchParams = URL.searchParams;

Example 1: This example adds the parameter by using append method.






<!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 onclick = "GFG_Fun()">
            Add Parameter
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var up = document.getElementById('GFG_UP');
            var url = new URL("https://www.geeksforgeeks.org");
            up.innerHTML = url;
            var down = document.getElementById('GFG_DOWN');
              
            function GFG_Fun() {
                url.searchParams.append('param_1', 'val_1');
                down.innerHTML = url;
            }
        </script
    </body
</html>                    

Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: This example adds the parameter by using set method.




<!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 onclick = "GFG_Fun()">
            Add Parameter
        </button>
          
        <p id = "GFG_DOWN" style =
            "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var up = document.getElementById('GFG_UP');
            var url = new URL("https://www.geeksforgeeks.org");
            up.innerHTML = url;
            var down = document.getElementById('GFG_DOWN');
              
            function GFG_Fun() {
                url.searchParams.set('param_1', 'val_1');
                down.innerHTML = url;
            }
        </script
    </body
</html>                    

Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up
Recommended Articles
Page :