Add the parameter value from the URL to the HTML code

Question

Add the parameter value from the URL to the HTML code

To retrieve the username from a URL and display it in HTML

Example URL

something.com?editors=username

HTML code snippet:

<P id="demo"><p>

Javascript function:

document.getElementById("demo").innerHTML =
"Welcome " + get_editor() + " to my website";

function get_editor() {
  var url = new URL( window.location.href );
  var params = new URLSearchParams(url.search);
  return params.get('editors');
}

javascript css html url

Answer 1

Answer №1

If you're dealing with a GET parameter, you can handle it like this:

(function() {
  var url_string = window.location.href;
  var url = new URL(url_string);
  var editors = url.searchParams.get('editors');
  var htmlElement = document.getElementById("element");
  htmlElement.innerHTML += editors;
})();

Make sure to replace searchParams with your specific parameter (n in this case).

Once you have retrieved the element, you can easily add your HTML code.

UPDATE: I've included an example of appending an HTML element.

Answer 2

If you're dealing with a GET parameter, you can handle it like this:

(function() {
  var url_string = window.location.href;
  var url = new URL(url_string);
  var editors = url.searchParams.get('editors');
  var htmlElement = document.getElementById("element");
  htmlElement.innerHTML += editors;
})();

Make sure to replace searchParams with your specific parameter (n in this case).

Once you have retrieved the element, you can easily add your HTML code.

UPDATE: I've included an example of appending an HTML element.

Answer 3

Answer №2

Although I may be coming in a bit late, after reading Czeran's response, I decided to put together this JavaScript function that appends a value to the URL and navigates to it:

    function appendToURL(value){
        var currentURL = window.location.href;
        currentURL += "/" + value;
        window.location.href = currentURL;
    }

This feature allows for a more customized URL modification.

I hope you find this helpful!

Answer 4

Although I may be coming in a bit late, after reading Czeran's response, I decided to put together this JavaScript function that appends a value to the URL and navigates to it:

    function appendToURL(value){
        var currentURL = window.location.href;
        currentURL += "/" + value;
        window.location.href = currentURL;
    }

This feature allows for a more customized URL modification.

I hope you find this helpful!

Add the parameter value from the URL to the HTML code

Answer №1

Answer №2

Similar questions

How can I make an AJAX request in Rails 3 to retrieve an HTML page?

Creating a new line in VBA HTMLBody with long text can be challenging

Receiving HTML codes through AJAX requests using .htaccess

Can inter-portlet communication be achieved using AJAX?

Is there a way to implement a feature that automatically closes the chatbot when the user clicks outside of it?

Dependency injection in Angular 2 pipes

Utilize jQuery to encase the final word of a paragraph within span tags

Having trouble removing a DOM element with jQuery?

Track hovering without the need for an 'out' event multiple times

How to dynamically inject HTML content from a child component into a different component using Angular 5

There appears to be an issue where the session object cannot be retrieved by the Struts2 action

What is the best way to establish and maintain lasting connections with the Firebase database while utilizing the superagent

Creating a custom fav icon within a button with CSS styling

404 error occurs when Spring-Boot fails to include CSS file through ResourceLocations

Place the "Close" button outside of the div container

Alternative way to search for child elements within an element without the use of jQuery

Passing a variable through jQuery onClick event to a URL via GET request and subsequently loading the content of

I am disappointed with the lack of functionality in Angular's HTML type inference

The 'length' cannot be searched using the 'in' operator

The transformation of button styles created with CSS and PNG images