[FAQ] Attribuer une valeur à l'attribut name d'un élément créé par un script
Citation:
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) :
Code:
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 :
Code:
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 :
Code:
1
2
3
|
monInput = document.createElement("<input name='nameInput'>");
//... suite du code |
Dans ce cas sous IE un
Code:
document.getElementById("idInput").name
retournera bien
nameInput.
:fleche:
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 :
Code:
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 :
Code:
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)
[edit 22/12/08]
Cette discussion complète celle ouverte par Spacefrog :
Name d'un élément de formulaire ajouté dynamiquement
[/edit]
