Add dynamic content with URL elements

Question

I have a question and I wonder if it's possible. I want to add dynamically content into an html page, by changing the id in the URL.

I mean, for example I want to add the name of a person to a web page:

At first my page would be : www.mypage.com/index

<p> Hello <span></span> welcome to our page</p>

The result I want to get, is by writing this url: www.mypage.com/index#YourName the code updates itself to this:

<p> Hello <span id="YourName">YourName</span> welcome to our page</p>

So the id and the content of the span updates juste by modifying the URL. I don't really know how to achieve that. I wonder if I could give to my span dynamically an id by typing it on the url, and then retrieve this id and use it as a the value of the span.

Meaning when url is www.mypage.com/index#HerName the content will be  Hello HerName welcome to our page ? — dm_tr
– dm_tr, Commented Jan 16, 2021 at 22:37

Alexandru Bulat · Accepted Answer · 2021-01-16 23:55:30Z

1

You can get the ID value from the url by using window.location.hash.

Additionally, you can watch these changes by using the hashchange window event.

function showHash() {
  const newHash = window.location.hash.replace("#", "");
  const resultSpan = document.querySelector(".hash-value");
  
  resultSpan.id = newHash;
  resultSpan.innerHTML = newHash;
}

window.addEventListener("hashchange", showHash, false);
window.addEventListener("DOMContentLoaded", showHash);

<body>

  <div>Current HASH in URL is: <span class="hash-value"></span></div>

  <div class="buttons">
    <a href="#hash1">hash1</a>
    <a href="#hash2">hash2</a>
    <a href="#hash3">hash3</a>
  </div>
</body>

edited Jan 16, 2021 at 23:55

answered Jan 16, 2021 at 22:18

Alexandru Bulat

895 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mscmdaddcts Over a year ago

Thank you for your answer, but I think I should update my question.

Alexandru Bulat Over a year ago

Did you test the snippet locally?

Alexandru Bulat Over a year ago

prnt.sc/wxj992 Is this what you need to achieve?

hayate · Accepted Answer · 2021-01-16 22:31:12Z

0

You can use JavaScript to get a current link such as:

<script>
   let YourLink = window.location.href;
   let startingPoint = YourLink.indexOf('#');
   let endingPoint = YourLink.indexOf('/'); // In case if the name is not the last thing on your link
   let NameYouWant = YourLink.substring(startingPoint, endingPoint);

   // So 'NameYouWant' would be the name you need to use
</script>

In case you use '#' for the starting point of every name in your link, hope it's helpful.

answered Jan 16, 2021 at 22:31

hayate

32 bronze badges

2 Comments

mscmdaddcts Over a year ago

Thank you for your answer, but how can I use this to update the content of my span?

hayate Over a year ago

@mscmdaddcts you give id to your span like this:  and then you add $('#mySpan')[0].innerHTML = NameYouWant; to your script, P.S sorry for late answer

dm_tr · Accepted Answer · 2021-01-16 22:49:38Z

0

Maybe you can try this

let splits = window.location.href.split("#");
let span = document.getElementsByTagName("p")[0].getElementsByTagName("span")[0];
span.innerText = splits[splits.length - 1];
span.id = splits[splits.length - 1];

answered Jan 16, 2021 at 22:49

dm_tr

4,8221 gold badge11 silver badges31 bronze badges

Collectives™ on Stack Overflow

Add dynamic content with URL elements

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related