Comment puis-je créer un lien vers une balise d'ancrage qui n'existe pas tant que Javascript ne l'a pas créée ?

Question

J'ai une page qui contient un ensemble de <div> et chacun d'entre eux est associé à une balise d'ancrage. Cela ressemble à quelque chose comme ceci :

<a name="anchor-0"></a>
<div id="div0">Some stuff</div>
<a name="anchor-1"></a>
<div id="div1">More stuff</div>
<a name="anchor-2"></a>
<div id="div2">Yet more stuff</div>

Le problème est que cet ensemble de <div> y <a> sont générées par Javascript et n'existent donc qu'après la création de la page. Lorsque je crée un lien comme celui-ci :

http://www.mywebsite.com/mypage.html#anchor-2

... il charge la page mais ne passe pas à la page anchor-2 qui n'est créée que quelque temps après que le navigateur a eu le temps d'exécuter le code Javascript qui l'a générée.

Comment puis-je faire en sorte que le navigateur se déplace vers la position de la balise d'ancrage sélectionnée une fois que le Javascript l'a générée ?

---

Voici essentiellement à quoi ressemble le Javascript qui génère le HTML :

function init() {
  gapi.client.setApiKey('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
  gapi.client.load('blogger', 'v2', function() {
    var request = gapi.client.blogger.posts.list({
      'blogId': 'xxxxxxxxxxxxxxxxxxxxxxxx',
      'fields': 'items(content,title)'
    });
    request.execute(function(response) {
    var main = document.getElementById("main");
    var anchor = 0;
      for (var i = 0; i < response.items.length; i++)
      {
        var Div = document.createElement("div")
        $(Div).append(response.items[i].title);
        $(main).append(Div);
        anchor = document.createElement("a");
        anchor.name = "anchor-" + anchor;
        anchor = anchor +1;

      }
    });
  });
}

Answer 1

Après la création de l'élément, vous pouvez le faire :

location.hash = "#anchor-2";

ou en utilisant scrollIntoView

element = document.getElementById('your_element-id');
element.scrollIntoView();

obtenir la valeur de hachage à partir de l'url, en faisant quelque chose comme: :

var hashVal = window.location.hash.substr(1);
//then jump to that hash
location.hash = "#" + hashVal;