Javascript Girl
  1. Javascript Girl
  3. Puis-je changer l'ID d'un élément HTML en utilisant Javascript?
Intereting Posts
Fonctions vides en Javascript Est-il préférable d'avoir un gros objet en JavaScript ou beaucoup plus petit? Désactivation du menu contextuel du clic droit sur une toile HTML? GetElementsByClassName renvoie au lieu du nœud annexé asynchrone Comment configurer un cookie pour être accessible sur tout le domaine en Javascript Node.JS: Meilleur moyen de gérer les requêtes max. Par minute sur un serveur Autoriser uniquement les lettres arabes dans la zone de texte en utilisant JavaScript Modification du type d'un objet dans JavaScript Paramètres d'itinéraire AngularJS avec n'importe quel caractère Le formulaire de modification de javascript s'ajoute dynamiquement JQuery Supprime la chaîne de la chaîne Débarrassez-vous des vues JavaScript dans Visual Studio Comment puis-je supprimer le hachage de localisation sans faire défiler la page? Enregistrer les états de l'objet dans .data ou attr – Performance vs CSS? Comment utiliser l'adresse au lieu de Lat / Long dans Google Map API

Puis-je changer l'ID d'un élément HTML en utilisant Javascript?

J'ai javascript variable obj qui représente un élément dans le DOM et je souhaite changer son identifiant. J'ai essayé de le faire par la suite, ce qui illustre également que cela ne fonctionne pas! 

obj.id = "newID"; alert(obj.id); // this gives me newID as required var element = document.getElementById("newID"); if (element != null) { alert("Hooray"); // this alert never gets displayed! }

Quel est le problème avec mon code ci-dessus, cela signifie que l'ID semble être modifié mais pas repris dans le DOM? Merci d'avance.

Le code que vous montrez fonctionne; Le problème est probablement dans le code qui recherche et affecte obj . Je suppose que ce n'est qu'un objet javascript, pas une partie de l'arbre DOM.

Comme vous ne nous avez pas tout le code, je suppose que vous avez probablement quelque chose de similaire à celui dans votre code 

 obj = document.createElement("div"); obj.id = "something"; // ... obj.id = "newID"; alert(obj.id); // this gives me newID as required var element = document.getElementById("newID"); if (element != null) { alert("Hooray"); // this alert never gets displayed! }

Dans ce cas particulier, document.getElementById("newID") ne vous renverra rien puisque l'élément n'a pas été ajouté à la page et, par conséquent, il n'est pas trouvé dans la page.

Il n'y a aucune raison pour laquelle cela ne devrait pas fonctionner en utilisant JavaScript pur. Voici un violon de travail qui montre qu'il fonctionne. Vous ne devriez pas avoir besoin d'une solution jQuery ou de toute autre méthode JavaScript, id = "foo"; Est la manière la plus simple de changer un ID d'objet DOM.

Jetez un coup d'œil sur mon violon ci-dessus et essayez de voir quelle est la différence entre votre code et le mien.

Votre code semble bien, bien que si vous parlez de cette façon dans votre code, vous pouvez vous rendre compte que l'accord n'est jamais fermé en raison du commentaire. 

 if (element != null) { alert("Hooray"); // this alert never gets displayed! } <-- this brace

Essaye ça:

Travaille pour moi 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>test</title> </head> <body bgcolor="#ffffff"> <script type="text/javascript"> function ChangeID(elementId, newId) { var obj = document.getElementById(elementId); obj.id = newId; } function SetContent(elementId, content) { var obj = document.getElementById(elementId); obj.innerHTML = content; } </script> <div id="div1"></div> <a href="#" onclick="ChangeID('div1', 'div6');">ChangeID</a><br /> <a href="#" onclick="SetContent('div6', 'this is the contents');">Set Contents</a> </body> </html>

Il y a une autre chose à considérer. Essayez-vous de le faire avant que le DOM ne soit prêt? Cet élément est-il encore chargé? Si vous essayez de modifier un élément que le DOM n'a pas dans l'arborescence, vous échouerez silencieusement.

Oui, vous pouvez, voici une solution avec jquery 

 $("#xxx").attr("id", "yyy");

ou 

 getElementById("xxx").setAttribute("id", "yyy");