How to append parameters to the URL without refresh with JavaScript?

You can achieve appending parameters to the URL without refreshing the page using JavaScript and the history.pushState() method. Here’s a basic example:

// Function to append parameters to the URL
function appendParam(key, value) {
    // Get the current URL
    var url = new URL(window.location.href);
    
    // Append the new parameter
    url.searchParams.append(key, value);
    
    // Update the URL without refreshing the page
    history.pushState(null, '', url);
}

// Example usage
appendParam('param1', 'value1');

This script defines a function appendParam() that takes a key-value pair and appends it to the URL’s query string without causing a page refresh.

You can call this function whenever you need to add parameters to the URL dynamically.

Keep in mind that this method only updates the URL in the browser’s address bar.

If you also want to reflect the changes in the page’s content based on these parameters, you’ll need additional JavaScript logic to detect changes in the URL and update the page accordingly, typically through event listeners or a framework like React or Angular.