Ajouter un ID à l'élément à l'aide de JavaScript
-
Utilisez la fonction
setAttribute()pour ajouteridà un élément en JavaScript -
Ajouter
idà un élément préexistant à l’aide de JavaScript -
Ajouter
idau nouvel élément à l’aide de JavaScript
L’attribut id joue un rôle essentiel dans JavaScript, qui se rapporte à un certain élément adapté à la fonction getElementById(). Les id doivent être uniques dans la page HTML, car ils permettent d’obtenir les valeurs et le contenu de l’élément HTML plus tard.
Avec l’importance de l’attribut id, ce didacticiel explique comment ajouter l’attribut id à un élément HTML préexistant ou nouveau à l’aide de JavaScript.
Utilisez la fonction setAttribute() pour ajouter id à un élément en JavaScript
Pour les éléments HTML préexistants et nouveaux, la fonction setAttribute() et la propriété .id sont utilisées. Le setAttribute() prend deux paramètres.
Le premier est le nom de l’attribut et le second est la valeur de l’attribut. Par exemple, le premier paramètre serait id, et le second peut être n’importe quelle chaîne pour ajouter l’attribut id à cet élément particulier.
D’autre part, on peut directement affecter la valeur de l’attribut id à la propriété id. Nous utiliserons le code de démarrage HTML suivant pour ajouter un id à un élément préexistant et nouveau.
Code HTML:
<!DOCTYPE html>
<html>
<head>
<title>Add IDs</title>
</head>
<body>
<h1 id="First Heading">My First Heading</h1>
<p id="firstParagraph">My first paragraph.</p>
</body>
</html>
Ajouter id à un élément préexistant à l’aide de JavaScript
var firstP = document.getElementById('firstParagraph');
firstP.setAttribute('id', 'firstPracPara');
console.log(document.getElementById('firstPracPara').id);
firstP.id = 'newPracPara';
console.log(document.getElementById('newPracPara').id);
Production :
"firstPracPara"
"newPracPara"
Nous avons utilisé deux façons dans le code ci-dessus pour ajouter l’attribut id. La première est la méthode setAttribute() et la seconde est la propriété .id.
Tout d’abord, nous obtenons l’élément dont la valeur de l’id est firstParagraph, utilisons la fonction setAttribute() pour définir une nouvelle valeur de l’attribut id, et imprimons sur la console pour confirmer qu’elle a été modifiée.
Maintenant, l’attribut id est changé de firstParagraph à firstPracPara. Modifions-le à nouveau en utilisant la propriété .id.
La dernière valeur de id est newPracPara ; imprimé aussi sur la console pour confirmer. Vous pouvez voir la sortie ci-dessus.
Ajouter id au nouvel élément à l’aide de JavaScript
var secondP = document.createElement('p');
secondP.setAttribute('id', 'secondPara');
console.log(secondP.id);
secondP.id = 'newPara';
console.log(secondP.id);
Production :
"secondPara"
"newPara"
Ici, nous créons d’abord un nouvel élément en utilisant la fonction createElement(), puis utilisons la méthode setAttribute() et la propriété .id pour ajouter id.
