Ajouter du contenu dynamique avec des éléments d'URL

mscmdaddcts

J'ai une question et je me demande si c'est possible. Je souhaite ajouter dynamiquement du contenu dans une page html, en modifiant l'identifiant dans l'URL.

Je veux dire, par exemple, je veux ajouter le nom d'une personne à une page Web:

Au début, ma page serait: www.mypage.com/index

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

Le résultat que je veux obtenir, c'est en écrivant cette url: www.mypage.com/index#YourName le code se met à jour à ceci:

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

Ainsi, l'id et le contenu du span se mettent à jour simplement en modifiant l'URL. Je ne sais pas vraiment comment y parvenir. Je me demande si je pourrais donner dynamiquement à mon span un identifiant en le tapant sur l'url, puis récupérer cet identifiant et l'utiliser comme valeur du span.

Alexandru Bulat

Vous pouvez obtenir la valeur de l'ID à partir de l'URL en utilisant window.location.hash.

En outre, vous pouvez observer ces modifications à l'aide de l' hashchangeévénement window.

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>

Articles connexes

Ajouter du contenu avec des crochets

Lora Ba J'ai une question de débutant : je souhaite ajouter un formulaire de recherche de produit à un thème WordPress via un hook. Je souhaite envelopper la recherche de produit dans un divafin de pouvoir la styliser. Comment puis-je ajouter divles éléments s

Comment ajouter du contenu dynamique avec JQuery sans dupliqué ?

Joker Chevalier Noir Salut, j'ai un code source comme celui-ci, le problème est que lorsque je clique sur le bouton avec la classe "addInput", il déclenche la fonction aux deux endroits et le numéro de chaque chapitre se trompe Comment puis-je faire en sorte q

Détecter les modifications du contenu des éléments avec jQuery

Elzo Valugi: change() La fonction fonctionne et détecte les changements sur les éléments du formulaire, mais y a-t-il un moyen de détecter quand le contenu d'un élément DOM a été modifié? Cela ne fonctionne pas, sauf s'il #contents'agit d'un élément de formula