Q : Sous IE, comment attribuer une valeur à l'attribut name d'un élément créé par un script ?
R :
Pour créer un élément HTML, nous utilisons cette syntaxe (par exemple pour créer un
input) :
1 2 3 4 5 6 7 8 9 10 11 12 13
|
var monInput;
// création de l'input
monInput = document.createElement("input");
monInput.type = "text";
monInput.name = "nameInput";
monInput.id = "idInput";
monInput.value = "";
// ajout de l'input créé dans le formulaire
document.getElementById("idFormulaire").appendChild(monInput); |
Par la suite, si vous faites :
1 2
|
alert(document.getElementById("idInput").name); |
Firefox retournera
nameInput tandis que IE ne retournera rien.
Pour palier à ce problème la syntaxe suivante a été proposée :
1 2 3
|
monInput = document.createElement("<input name='nameInput'>");
//... suite du code |
Dans ce cas sous IE un
document.getElementById("idInput").name
retournera bien
nameInput.
Or cette syntaxe n'est pas valide sous Firefox (entre autres) et une exception sera levée.
Voici donc deux manières de contourner le problème :
1er exemple :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
if (document.all) // pour IE
{
monInput = document.createElement("<input name='nameInput'>");
}
else
{ // pour FF et autres navigateurs
monInput = document.createElement("input");
monInput.name = "nameInput";
}
// suite du code :
monInput.type = "text";
monInput.id = "idInput";
monInput.value = "";
// ajout de l'input créé dans le formulaire
document.getElementById("idFormulaire").appendChild(monInput); |
2ème exemple : gérer l'exception levée :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| try
{
// si une exception est levée, le contenu du catch est exécuté
monInput = document.createElement("<input name='nameInput'>");
}
catch(erreur)
{
monInput = document.createElement("input");
monInput.name = "nameInput";
}
// suite du code :
monInput.type = "text";
monInput.id = "idInput";
monInput.value = "";
// ajout de l'input créé dans le formulaire
document.getElementById("idFormulaire").appendChild(monInput); |
Autre lien : :
[DOM] Création dynamique d'éléments HTML (SpaceFrog)
Partager