Discussion :

[vermine]

Bonjour,

Je m'étonnais de ne pas encore avoir vu quelque chose du genre ici. En fait, soit j'ai mal regardé, soit j'ai compris pourquoi. J'ai rédigé une petite fonction (je la voulais simple au début mais j'ai du la complexifier) qui permet de créer des éléments HTML.

A l'origine, j'espérais qu'elle ressemble à ceci:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
//id_pere = id de l'élément père
//element = le type d'élément (input, table, ...)
//tab_attribut = le tableau des attributs des éléments (id, type, name, ...)
// --- C'est une contraitre, tab_attribut fonctionne par couple: new Array("id", "monId", "type", "text", "name", "monNom");
 
function create_element(id_pere, element, tab_attribut)
{
   var objet_element = document.createElement(element);
 
   for(var i=0; i<tab_attribut.length; i++)
   {
      objet_element[tab_attribut[i]] = tab_attribut[++i];
   }
 
   document.getElementById(id_pere).appendChild(objet_element);
 
   return objet_element;
}

Appelée par exemple comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="monDiv">&nbsp;</div>
 
<script>
var id_pere       = "monDiv";
var element       = "INPUT";
var tab_attribut  = new Array("id", "monId1", "type", "text", "name", "nom1", "value", "valeur", "size", "5");
create_element(id_pere, element, tab_attribut);
</script>

C'est fort jolie et ça donne un résultat dans bien des cas.
... dans bien des cas mais pas dans tous. J'ai voulu ajouter une couleur de fond à cet input et j'ai du rectifier la fonction car le style me demandait un cssText:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
for(var i=0; i<tab_attribut.length; i++)
{
   //...
   //Syntaxe différente pour les style
   if(tab_attribut[i] == "style")
   {
      objet_element[tab_attribut[i]].cssText = tab_attribut[++i];
   }
   //...
}

C'était sympa, tout tournait bien, je pouvais même ajouter une image sur un lien que je venais de créer grâce au return dans la fonction.
En parlant de fonction, si je désire ajouter une fonction sur le onclick par exemple, je n'ai pour l'instant pas trouvé d'autre solution que de créer la fonction dans une variable (merci Bovino). Donc ça passe quand même. Il faut simplement être rigoureux avec ce qu'on précise dans le tableau des attributs.

Car, soyons fou, j'ai même eu l'idée de construire tout un tableau. C'est niquel. Sauf que j'ai cherché un peu pour faire un simple colspan... La casse, mes amis, la casse:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
element["colSpan"] = maValeur;

Et puis au loin, j'ai vu l'inquiètude venir. Une checkbox. C'est bête, ça fonctionne bien. Sauf quand on désire la cocher... Bah oui, on coche une case uniquement après l'appendChild. Or dans ma fonction, on fait l'appendChild à la fin. La fonction a donc évolué:

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
for(var i=0; i<tab_attribut.length; i++)
{
   //...
   //Cocher les cases (1/2)...
   if(tab_attribut[i] == "checked" && tab_attribut[++i] == "true")
   {
      var element_to_check = objet_element;
   }            
   //...
}
 
document.getElementById(id_pere).appendChild(objet_element);
 
//Cocher les cases (2/2)...
if(element_to_check)
{
   document.getElementById(element_to_check.id).checked = eval(true);
}

Alors voila. Je n'ai pas cherché à tester d'autres éléments. Je vais me contenter de ça car à mon avis, la fonction finirait par s'agrandir encore et le but escompté ne serait plus réalisé...

Je vous mets une page de test dont vous pouvez lire le code, la fonction y est en entière (la page n'est pas construite HTML-ment parlant, mais ça devrait passer quand même).