Maison >interface Web >js tutoriel >Comment changer l'ID d'un élément en utilisant JavaScript ?

Comment changer l'ID d'un élément en utilisant JavaScript ?

WBOYavant: 2023-09-13 14:45:131589parcourir

如何使用 JavaScript 更改元素的 ID？

De manière générale, l'ID de tout élément d'un document HTML est unique et ne peut être attribué qu'une seule fois à un élément. Mais l'identifiant peut être modifié ultérieurement à l'aide de JavaScript, en suivant les mêmes règles d'unicité du nouvel identifiant, et un seul élément peut contenir le nouvel identifiant. Dans cet article, nous examinerons les moyens de modifier l'ID d'un élément à l'aide de JavaScript.

JavaScript fournit ou nous permet d'utiliser l'attribut id pour obtenir l'identifiant de n'importe quel élément, ainsi que de modifier ou d'ajouter un nouvel identifiant à n'importe quel élément HTML du document.

Apprenons comment modifier l'ID d'un élément dans un document HTML via JavaScript en utilisant l'attribut id à l'aide d'un exemple de code.

Grammaire

La syntaxe suivante vous expliquera comment utiliser l'attribut id pour modifier, obtenir un nouvel identifiant et ajouter un nouvel identifiant à un élément HTML -

Selected_element.id = newID;

Dans la syntaxe ci-dessus, nous sélectionnerons d'abord l'élément HTML dont nous voulons modifier l'ID à l'aide du HTML DOM, puis attribuerons un nouvel opérateur d'attribution d'identifiant sur son côté droit à l'aide de l'attribut id avec l'opérateur point.

Comprenons l'implémentation pratique de l'attribut id modifiant l'ID d'un élément dans un document HTML à travers un exemple de code.

Algorithme

Étape 1 - Dans la première étape, nous ajouterons un élément d'entrée pour obtenir le nouvel ID en entrée de l'utilisateur et plus tard, nous modifierons l'ID du même élément d'entrée en utilisant l'attribut id.
Étape 2 - Dans cette étape, nous ajouterons un élément bouton au document HTML à l'aide de l'événement onclick, qui appellera plus tard une fonction JavaScript pour modifier l'ID de l'élément d'entrée.
Étape 3 - Dans l'étape suivante, nous récupérerons l'élément d'entrée et afficherons l'identifiant initial de cet élément à l'utilisateur afin qu'il puisse facilement voir l'ID changeant de l'élément.
Étape 4 - Dans la quatrième étape, nous définirons une fonction JavaScript où nous obtiendrons à nouveau l'élément d'entrée et définirons son identifiant égal au texte saisi par l'utilisateur dans le champ de saisie et modifierons son identifiant en utilisant l'attribut id pour ce texte.
Étape 5 - Dans la dernière étape, nous utiliserons l'attribut id pour afficher le nouvel ID attribué à l'élément et attribuer la fonction comme valeur à l'événement onclick afin qu'il puisse être appelé plus tard lorsque l'utilisateur clique sur le bouton .

Exemple

L'exemple suivant illustrera comment utiliser l'attribut id pour modifier l'identifiant d'un élément dans un document HTML -

<html>
<body>
   <h2>Changing ID of the element using JavaScript</h2>
   <p>Enter new ID, you want to give to element:</p>
   <input type = "text" id = "inp1"> <br> <br>
   <button id = "btn" onclick = "display()"> Click to change the ID </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you entered ID of your choice is: <b> " + inp1.id + " </b> <br>"
      function display() {
         var inp = document.getElementById('inp1');
         var newID = inp.value;
         inp.id = newID;
         result.innerHTML += " The ID of input element after clicking the button is changed to: <b> " + inp.id + " </b> <br> ";
      }
   </script>
</body>
</html>

Dans l'exemple ci-dessus, nous avons modifié l'ID de l'élément d'entrée à l'aide de l'attribut id de JavaScript et affiché l'ancien et le nouvel ID attribués à l'élément d'entrée sur l'écran de l'utilisateur.

Regardons un autre exemple de code dans lequel nous modifierons directement l'ID de l'élément dans l'événement onclick au lieu de lui passer une fonction.

Algorithme

Les algorithmes de l'exemple ci-dessus et de cet exemple sont presque similaires. Il vous suffit de modifier la valeur transmise dans l'événement onclick de l'élément bouton, comme indiqué dans l'exemple ci-dessous.

Exemple

L'exemple ci-dessous vous expliquera les modifications qui doivent être apportées à l'algorithme précédent pour lui faire changer l'identifiant de l'élément d'entrée comme l'exemple précédent -

<html>
<body>
   <h2>Change ID of the element using JavaScript</h2>
   <p>Click the button below to change the ID of the below input element:</p>
   <input type = "text" id = "inp1", value = "Input Element"> <br> <br>
   <button id = "btn" onclick = "document.getElementById('inp1').id = 'newID'; return false">    Click to change the ID
   </button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var inp1 = document.getElementById('inp1');
      result.innerHTML += " The ID of the input element before you clicked the button is: <b> " + inp1.id + " </b> <br><br>"
      result.innerHTML += "<b>Note: </b>To see the change in the ID of the input element open the developer tools and inspect the input element to see its ID after clicking the button. ";
   </script>
</body>
</html>

Dans l'exemple ci-dessus, nous pouvons modifier l'ID de l'élément d'entrée, mais dans ce cas, nous ne pouvons pas remplacer l'identifiant précédent par l'identifiant de notre choix car nous attribuons statiquement la nouvelle valeur d'ID à l'élément. p>

Dans cet article nous avons appris comment changer l'identifiant d'un élément présent dans un document HTML en utilisant un identifiant de votre choix et un identifiant statique que l'on souhaite donner à cet élément, cet identifiant statique doit être unique et seul le document peut contenir cet identifiant est un seul élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html 运算符赋值运算符事件 dom 算法

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Implémentation de graphiques en JavaScriptArticle suivant：Implémentation de graphiques en JavaScript

Articles Liés

Voir plus