Créer et insérer des éléments
Avec le DOM, l'ajout d'un élément HTML se fait en trois temps :
La création d'un élément se fait avec la méthode createElement(), un sous-objet de l'objet racine, c'est-à-dire document dans la majorité des cas :
var newLink = document.createElement('a'); |
On crée ici un nouvel élément <a>. Cet élément est créé, mais n'est pas inséré dans le document, il n'est donc pas visible. Cela dit, on peut déjà travailler dessus, en lui ajoutant des attributs ou même des événements (que nous verrons dans le chapitre suivant).
Si vous travaillez dans une page Web, l'élément racine sera toujours document, sauf dans le cas des frames. La création d'éléments au sein de fichiers XML sera abordée plus tard.
Ici, c'est comme nous avons vu précédemment : on définit les attributs, soit avec setAttribute(), soit directement avec les propriétés adéquates.
newLink.id = 'sdz_link'; newLink.href = 'http://www.siteduzero.com'; newLink.title = 'Découvrez le Site du Zéro !'; newLink.setAttribute('tabindex', '10'); |
On utilise la méthode appendChild() pour insérer l'élément. Append child signifie « ajouter un enfant », ce qui signifie qu'il nous faut connaître l'élément auquel on va ajouter l'élément créé. Considérons donc le code suivant :
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Le titre de la page</title> </head>
<body> <div> <p id="myP">Un peu de texte <a>et un lien</a></p> </div> </body> </html> |
On va ajouter notre élément <a> dans l'élément <p> portant l'ID myP. Pour ce faire, il suffit de récupérer cet élément, et d'ajouter notre élément <a> via appendChild() :
document.getElementById('myP').appendChild(newLink); |
Une petite explication s'impose ! Avant d'insérer notre élément <a>, la structure DOM du document ressemble à ceci :
Avant d'insérer notre élément , la structure DOM du document ressemble à cette figure
On voit que l'élément <a> existe, mais n'est pas lié. Un peu comme s'il était libre dans le document : il n'est pas encore placé. Le but est de le placer comme enfant de l'élément myP. La méthode appendChild() va alors déplacer notre <a> pour le placer en tant que dernier enfant de myP :
L'élément est placé en tant que dernier enfant
Cela veut dire qu'appendChild() insérera toujours l'élément en tant que dernier enfant, ce qui n'est pas toujours très pratique. Nous verrons plus tard comment insérer un élément avant ou après un enfant donné.
L'élément a été inséré, seulement il manque quelque chose : le contenu textuel ! La méthode createTextNode() sert à créer un nœud textuel (de type #text) qu'il nous suffira d'ajouter à notre élément fraîchement inséré, comme ceci :
var newLinkText = document.createTextNode("Le Site du Zéro");
newLink.appendChild(newLinkText);
L'insertion se fait ici aussi avec appendChild(), sur l'élément newLink. Afin d'y voir plus clair, résumons le code :
<body>
<div>
<p id="myP">Un peu de texte <a>et un lien</a></p>
</div>
<script>
var newLink = document.createElement('a');
newLink.id = 'sdz_link';
newLink.href = 'http://www.siteduzero.com';
newLink.title = 'Découvrez le Site du Zéro !';
newLink.setAttribute('tabindex', '10');
document.getElementById('myP').appendChild(newLink);
var newLinkText = document.createTextNode("Le Site du Zéro");
newLink.appendChild(newLinkText);
</script>
</body>
Voici donc ce qu'on obtient, sous forme schématisée :
Le résultat obtenu
Il y a quelque chose à savoir : le fait d'insérer via appendChild() n'a aucune incidence sur l'ordre d’exécution des instructions. Cela veut donc dire que l'on peut travailler sur les éléments HTML et les nœuds textuels sans qu'ils soient au préalable insérés dans le document. Par exemple, on pourrait ordonner le code comme ceci :
var newLink = document.createElement('a'); var newLinkText = document.createTextNode("Le Site du Zéro");
newLink.id = 'sdz_link'; newLink.href = 'http://www.siteduzero.com'; newLink.title = 'Découvrez le Site du Zéro !'; newLink.setAttribute('tabindex', '10');
newLink.appendChild(newLinkText);
document.getElementById('myP').appendChild(newLink); |
Ici, on commence par créer les deux éléments (le lien et le nœud de texte), puis on affecte les variables au lien et on lui ajoute le nœud textuel. À ce stade-ci, l'élément HTML contient le nœud textuel, mais cet élément n'est pas encore inséré dans le document :
L'élément HTML contient le nœud textuel, mais cet élément n'est pas encore inséré dans le document
La dernière instruction insère alors le tout.
Nous vous conseillons d'organiser votre code comme le dernier exemple, c'est-à-dire avec la création de tous les éléments au début, puis les différentes opérations d'affection. Enfin, l'insertion des éléments les uns dans les autres et, pour terminer, l'insertion dans le document. Au moins comme ça c'est structuré, clair et surtout bien plus performant !
appendChild() retourne une référence (voir plus loin pour plus de détails) pointant sur l'objet qui vient d'être inséré. Cela peut servir dans le cas où vous n'avez pas déclaré de variable intermédiaire lors du processus de création de votre élément. Par exemple, le code suivant ne pose pas de problème :
var span = document.createElement('span'); document.body.appendChild(span);
span.innerHTML = 'Du texte en plus !'; |
En revanche, si vous retirez l'étape intermédiaire (la première ligne) pour gagner une ligne de code alors vous allez être embêté pour modifier le contenu :
document.body.appendChild(document.createElement('span'));
span.innerHTML = 'Du texte en plus !'; // La variable « span » n'existe plus… Le code plante. |
La solution à ce problème est d'utiliser la référence retournée par appendChild() de la façon suivante :
var span = document.body.appendChild(document.createElement('span'));
span.innerHTML = 'Du texte en plus !'; // Là, tout fonctionne ! |
Créé avec HelpNDoc Personal Edition: Générateur de documentation et EPub gratuit