[Résolu] Les boutons et le DOM

Bonjour à toutes et à tous,

Je viens très souvent ici pour chercher une information.
J'en profite pour dire merci à toutes les personnes qui répondent aux questions (parfois tordues ). Bien souvent, je m'en sors grâce à vous.

Mais là pas de réponse à ma question. Je poste donc pour la première fois

Voici mon cas :
Depuis quelques temps, je me mets à développer des interfaces dites WEB2.0.
J'ai créé un "module" qui me permet un affichage dynamique de tableau avec Ajax en m'appuyant sur Prototype.js. Mais là n'est pas le soucis.

Curieux de nature, j'ai voulu me laisser aller à une coquetterie dans le but d'approfondir ma connaissance des DOM.

Je suis tombé, sur le net, sur des articles qui parlait de la fameuse balise obsolète <button>
La spécificité étant qu'avec cette balise, on peut ajouter une image dans (ou sur) un bouton.

<button><img src="monimage.png" border="0" ></button>

Je me suis alors posé la question suivante : Comment est faite l'architecture DOM de ce cas de figure ?

Je me suis donc lancé dans un bout de code :

function AfficheBouton(ParentElmt)
{
var BtnClick = document.createElement("input");
BtnClick.type = "button";
BtnClick.value = "Go";
var ImageBtn = document.createElement("img");
ImageBtn.src = "icones/find.png";
BtnClick.appendChild(ImageBtn);
ParentElmt.appendChild(BtnClick);
}

Et là c'est le drame ... tout s'enchaîne ...
ça ne marche pas ...

Quelqu'un aurait il la gentillesse de bien vouloir m'expliquer la chose ?

Merci de votre attention
Modifié par Leorilan (14 May 2009 - 15:52)

Hello Leorilan et bienvenue,

Leorilan a écrit :
Je suis tombé, sur le net, sur des articles qui parlait de la fameuse balise obsolète <button>

Hem... soit on t'a menti, soit tu as mal interprété : l'élément BUTTON n'est absolument pas obsolète. Il sera effectivement supprimé (comme d'autres éléments en XHTML2) mais ce n'est ni d'actualité ni un problème puisqu'il y aura toujours (x)HTML5 (cf. ce sujet qui en parle).

Sinon je ne comprends pas bien ta question puisque du parle de l'élément BUTTON et que tu fais un document.createElement("input");

Merci Heyoan pour ta réponse si rapide.

Effectivement, j'ai du faire une lecture trop rapide des éléments que j'ai trouvé sur le net à propos de la balise <button>. Merci pour les liens très instructifs.

En fait, j'utilise le DOM pour créer des éléments de formulaire.
Et je voulais utiliser une image pour la mettre sur un bouton.

Mais je n'y arrive pas.

Apparemment, le fait de faire un "appendChild" d'une image dans un bouton ne fonctionne pas.
Ou j'ai oublié quelque chose.

Je voulais avoir des éclaircissement sur le sujet.
Modifié par Leorilan (14 May 2009 - 15:35)

Leorilan a écrit :
Mais je n'y arrive pas.

Apparemment, le fait de faire un "appendChild" d'une image dans un bouton ne fonctionne pas.
Ou j'ai oublié quelque chose.

Eh bien justement le problème vient de ce que tu crées un INPUT au lieu de créer un BUTTON : le premier n'accepte pas d'élément IMG.

En clair :

var BtnClick = document.createElement("button");
BtnClick.type = "submit";
BtnClick.value = "Go";

Edit: au passage :
* voir cette page qui résume la hiérarchie des éléments en XHTML 1.0 Strict (par exemple INPUT et BUTTON).
* le value sur le BUTTON ne sert pas à grand chose si tu ne lui donnes pas de name.
* il faut prévoir un alt à ton IMG en cas d'images désactivées/indisponibles.
Modifié par Heyoan (14 May 2009 - 15:51)

Arf .... je suis tellement enfermé dans ma structure HTML classique ...
L'habitude du

<input type="button" .... > 

Merci beaucoup Heyoan.
Modifié par Leorilan (14 May 2009 - 15:53)