How to add a parameter to the URL in JavaScript ? - GeeksforGeeks

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.
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:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?