How to add a parameter to the URL in JavaScript?

In JavaScript, you can add parameters to URLs using the URLSearchParams API. There are two primary methods: append() for adding new key-value pairs and set() for adding or updating parameters.

The append() method adds new key-value pairs to the URL without removing existing ones. If the same key already exists, it creates multiple entries.

The set() method adds a parameter if it doesn't exist, or replaces the value if the key already exists. Unlike append(), it ensures only one value per key.

Using append() Method

The append() method adds new parameters while preserving existing ones:

let inputUrl = new URL('https://example.com?key1=value1');
let inputParams = new URLSearchParams(inputUrl.search);
console.log("Original parameters:", inputParams.toString());

inputParams.append('key2', 'value2');
inputParams.append('key3', 'value3');

console.log("After appending parameters:", inputParams.toString());

// Construct the complete URL
inputUrl.search = inputParams.toString();
console.log("Complete URL:", inputUrl.toString());

Original parameters: key1=value1
After appending parameters: key1=value1&key2=value2&key3=value3
Complete URL: https://example.com?key1=value1&key2=value2&key3=value3

Using set() Method

The set() method adds new parameters or updates existing ones:

let inputUrl = new URL('https://example.com?key1=value1&key2=oldValue');
let inputParams = new URLSearchParams(inputUrl.search);
console.log("Original parameters:", inputParams.toString());

inputParams.set('key2', 'newValue');  // Updates existing key
inputParams.set('key3', 'value3');    // Adds new key

console.log("After setting parameters:", inputParams.toString());

// Construct the complete URL
inputUrl.search = inputParams.toString();
console.log("Complete URL:", inputUrl.toString());

Original parameters: key1=value1&key2=oldValue
After setting parameters: key1=value1&key2=newValue&key3=value3
Complete URL: https://example.com?key1=value1&key2=newValue&key3=value3

Difference Between append() and set()

Here's how they handle duplicate keys:

let params1 = new URLSearchParams('category=tech');
let params2 = new URLSearchParams('category=tech');

// append() allows multiple values for same key
params1.append('category', 'sports');
console.log("Using append():", params1.toString());

// set() replaces existing value
params2.set('category', 'sports');
console.log("Using set():", params2.toString());

Using append(): category=tech&category=sports
Using set(): category=sports

Comparison

Conclusion

Use append() to add new parameters while preserving existing ones, and set() when you want to add or update parameters with unique keys. Both methods work with the URLSearchParams API for clean URL manipulation.