Ajouter un ID à l'élément à l'aide de JavaScript

Pour ajouter ou modifier l’identifiant d’un élément HTML, sélectionnez cet élément et attribuez-lui une valeur avec element.setAttribute('id', 'profile') ou element.id = 'profile'. La nouvelle valeur remplace tout identifiant déjà attribué à cet élément. Choisissez un identifiant unique dans le document.

Ajouter un identifiant à un élément existant

Sélectionnez un élément existant à l’aide de son identifiant actuel, puis attribuez-lui la nouvelle valeur. Par exemple, si la page contient <h2 id="intro">Introduction</h2>, sélectionnez cet élément HTML avec const heading = document.getElementById('intro'), puis modifiez son identifiant avec heading.setAttribute('id', 'article-title'). Sa propriété .id contient alors article-title ; utilisez document.getElementById('article-title') pour le retrouver ensuite avec son nouvel identifiant.

La démonstration JavaScript autonome qui suit utilise un objet JavaScript ordinaire pour illustrer la même affectation et la valeur affichée. Elle ne sélectionne ni ne modifie aucun élément HTML ; pour agir sur une page, utilisez plutôt le code DOM ci-dessus :

const element = { id: 'intro' };
element.id = 'article-title';
console.log(element.id);

article-title

setAttribute() prend un nom d’attribut et une valeur ; cette méthode permet donc aussi de définir des attributs autres que id.

Un identifiant doit désigner un seul élément du document. Si un autre élément utilise déjà article-title, choisissez une autre valeur afin que les identifiants restent uniques.

Ajouter un identifiant à un nouvel élément

Créez l’élément avec document.createElement('p'), attribuez-lui l’identifiant note.id = 'status-note', puis ajoutez-le au document avec document.body.append(note). Créer un nœud ne suffit pas à l’afficher sur la page. Cette opération ajoute le paragraphe à la fin du corps du document ; définissez son texte ou ses autres attributs avant de l’ajouter si vous souhaitez que ces valeurs soient déjà présentes lorsqu’il entre dans le document.

Choisir entre setAttribute() et la propriété id

Pour définir l’identifiant d’un élément, element.id = 'profile' est une méthode directe et concise. L’appel element.setAttribute('id', 'profile') utilise la méthode générique de définition des attributs ; il est utile lorsque le code manipule déjà des noms d’attributs de manière dynamique. Les deux approches définissent le même identifiant : il n’est pas nécessaire de les utiliser toutes les deux. La propriété .id renvoie l’identifiant actuel de l’élément et permet donc aussi de lire sa valeur simplement.

Ajouter un identifiant avec jQuery

Si jQuery est déjà chargé sur la page, sélectionnez l’élément et définissez son identifiant avec $('#intro').attr('id', 'article-title'). L’identifiant de l’élément sélectionné devient alors article-title, comme avec les exemples utilisant l’API DOM native. Le sélecteur $ et la méthode .attr() nécessitent que jQuery soit inclus dans la page ; sans cette bibliothèque, utilisez les méthodes JavaScript natives présentées plus haut.