Dynamically Change HTML Content Using a URL Variable

Question

I have been struggling with dynamically changing HTML content using URL variables. Let me give you an example and than provide you my code thus far.

Ex. I have a landing page with content to be changed. I would like to have a variable in my URL www.domain.com/header=new-content

I would like to be able to rewrite the HTML to show the new header using Javascript or Jquery. Here is what I have thus far. Seems like I am missing the trigger or if/else statement.

Thank you so much!

<script>
    var element = document.getElementById("header");
    element.innerHTML = "New Content";
    </script>

is the header a querystring or an element in your html page? — Sushil, Jun 01 '15 at 23:50

score 4 · Accepted Answer · edited May 23 '17 at 12:30

First of all, when you're dealing with URL parameters, you should place a ? before you start defining parameters. This will result in the browser retrieving the page www.foo.bar/ instead of www.foo.bar/header=new-content. Once you add the question mark, you can retrieve URL parameters using the following snippet. I retrieved this from this question.

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

In your specific case, your final code, after defining the above function, might look something like this:

<script>
var header = getUrlParameter('header');
document.getElementById('header').innerHTML = header;
</script>

This will retrieve the URL parameter header and change the value of the element with ID header to the value contained in the URL. For the URL www.foo.bar/?header=new-content, the element's value would be changed to new-content. If you want to have spaces in the variable, you can remove the URL-encoded characters (ex. %20 for space) by changing the first line in the above snippet to this:

var header = decodeURIComponent(getUrlParameter('header'));

Last minute addition: I just noticed that another answer with more-or-less the same code snippet came in while I was writing this. Whoops. :)

score 1 · Answer 2 · answered Jun 02 '15 at 00:05

You could read the url and extract the desired paramenter with a function such as:

function fGetUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) {
            return sParameterName[1];
        }
    }
};

So if you are accessing a url such as: http://www.domain.com/?header=new-content

You could store the parameter in a variable

var stringHeader = fGetUrlParameter("header")

and modify your element html

 var element = document.getElementById("header");
 element.innerHTML = stringHeader;

Yes! thank you. I didn't even think about storing the url parameter in a variable. Thanks so much for the help. — user2300923, Jun 02 '15 at 01:09

score 0 · Answer 3 · answered Jun 02 '15 at 00:01

0

I'm not sure I understood your question. Assuming that you want to pass a parameter using the URL the correct way to rewrite your url would be
www.domain.com?header=new-content
That would make your variable named header equal the value of new-content.
The way to extract your data would be:

<script>
    var element = document.getElementById("header");
    //use your variable
 </script>

answered Jun 02 '15 at 00:01

Juan Carlos

187
1
1
13

Awesome thank you. I missed the ? in the url. – user2300923 Jun 02 '15 at 01:06

Dynamically Change HTML Content Using a URL Variable

3 Answers3