How to add a parameter to the URL in JavaScript ? Last Updated : 15 Jan, 2024 Summarize Comments Improve Suggest changes Share Like Article Like 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. Table of Content Using the append methodUsing set methodApproach 1: Using the append methodIn 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: Approach 2: Using set methodIn 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: Comment More infoAdvertise with us Next Article How to get URL Parameters using JavaScript ? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to redirect to a relative URL in JavaScript? To redirect to a relative URL in JavaScript, you could use window.location.href. It is a property in JavaScript that represents the complete URL of the current page. It can be used to get the current URL or to navigate to a new URL by assigning a new URL to it. Approach HTML Structure:The HTML file 2 min read How to Create Query Parameters in JavaScript ? Creating query parameters in JavaScript involves appending key-value pairs to a URL after the `?` character. This process is essential for passing data to web servers via URLs, enabling dynamic and interactive web applications through GET requests and URL manipulation. Example: Input: {'website':'ge 3 min read How To Get URL And URL Parts In JavaScript? In web development, working with URLs is a common task. Whether we need to extract parts of a URL or manipulate the URL for navigation, JavaScript provides multiple approaches to access and modify URL parts. we will explore different approaches to retrieve the full URL and its various components.The 3 min read How to parse a URL into hostname and path in javascript ? We can parse a URL(Uniform Resource Locator) to access its component and this can be achieved using predefined properties in JavaScript. For Example, the first example parses the URL of the current web page and the second example parses a predefined URL. Example 1:This example parses the URL of the 1 min read How to get URL Parameters using JavaScript ? To get URL parameters using JavaScript means extracting the query string values from a URL. URL parameters, found after the ? in a URL, pass data like search terms or user information. JavaScript can parse these parameters, allowing you to programmatically access or manipulate their values.For getti 3 min read How to Get Browser to Navigate URL in JavaScript? As a web developer, you may need to navigate to a specific URL from your JavaScript code. This can be done by accessing the browser's window object and using one of the available methods for changing the current URL.In JavaScript, there are several approaches for navigating to a URL. The most common 4 min read Like