Création d'éléments HTML

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:

---

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:

---

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:

---

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:

---

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:

---

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).

Merci Vermine, je ne voudrais pas être rabat-joie, mais tu es passé à cote de quelques petites choses, en particulier au niveau des différences entre browser

IE ne sait pas attribuer un name dynamiquement et il existe quelques différences de syntaxe entre IE et les autres browser

Tu n'as pas du voir cette contribution:

http://www.developpez.net/forums/d53...t=mais+pas+que

Non non, tu n'es pas du tout rabat-joie. ^^
Je me disais bien que ce n'était pas aussi simple que ça. :mouarf:
Mais mon travail n'est pas vain (pour moi) car j'apprends mieux en testant par moi-même. ;)