[DOM] fonctionalité et utilité de innerHTML

Version imprimable

07/04/2009, 11h00
rfily

[DOM] fonctionalité et utilité de innerHTML

Bonjour!
je voudrais savoir la fonctionnalité et l'utilité de innerHTML.
Merci !
07/04/2009, 11h07
javatwister

la fonctionnalité, c'est réécrire tout ou partie de la source sans y toucher et d'interpréter le résultat automatiquement;

l'utilité? euh... je vois pas;
07/04/2009, 13h50
Sh4dow49

l'utilité, c'est qu'avec AJAX, tu peux par exemple appeler une page php (ou dans un autre langage selon celui que tu utilise) pour modifier le contenu de ta page sans la recharger complètement (ce qui est donc beaucoup plus rapide dans pas mal de cas)
07/04/2009, 13h52
rfily

Merci mais quand et comment alors l'utiliser. si possible avec un exemple :king:
07/04/2009, 13h56
Sh4dow49

voici un exemple de comment l'utiliser (mais tu peux l'utiliser pour modifier bien d'autres choses que des listes déroulantes, par exemple je l'utilise pour modifier un table dans ma page pour modifier les infos qu'il contient).

quand l'utiliser, c'est à toi de voir.

Si c'est pour un site web, pense bien que pour te faire recenser sur google ou autre, cette technique sera invisible m'a-t-on dit, donc à utiliser avec modération
07/04/2009, 13h59
E.Bzz

Citation:

Envoyé par Sh4dow49

(ce qui est donc beaucoup plus rapide dans pas mal de cas)

Rapide ?
A mettre en place pour le développeur, oui, mais sinon ... ?

Citation:

Envoyé par rfily

quand et comment alors l'utiliser

Plutôt quand ne pas l'utiliser :
surtout pas pour mettre à jour le contenu d'un formulaire (avec IE en tous cas) : les modifications n'affecteraient que l'affichage et ne seraient pas prises en compte lors de l'envoie du formulaire.

Pour les exemples, tu en trouveras dans le forum Ajax ;)

Mais tu peux aussi faire ça proprement avec les instructions DOM :mrgreen:
(et dans ce cas, plus de restrictions)

A+
07/04/2009, 14h01
Sh4dow49

c'est vrai que ça dépend des cas au niveau de la rapidité, mais dans mon cas en tout cas c'est plus rapide de recharger une partie de la page comme mon table plutot que toute la page (qui nécessite de refaire toutes les requêtes SQL nécessaires à la page plutot que seulement celle qui remplit le table, entre autre)
07/04/2009, 14h24
E.Bzz

Citation:

Envoyé par Sh4dow49

dans mon cas en tout cas c'est plus rapide de recharger une partie de la page comme mon table plutot que toute la page

Ca, bien sûr ;)
Par contre, par rapport à la même mise à jour via les instructions DOM, c'est moins sûr ...

A+

justement je l'ai utiliser dans une table et dès que je click sur le boutton qui appelle la fonction les données du précédent élement disparaissent et comment faire pour les garder. voici le code

Code:

1
2
3
4
function addvar() 
{
	document.getElementById("ligne_famille").innerHTML += "<table width='100%' border='0' cellspacing='1' cellpadding='0' ><tr><td width='14%' align='center'><div align='left'>Famille Contrat : </div></td><td width='16%'><select name='select_famille[]'><option value=''></option>{option_famille}</select></td><td width='17%'><div align='left'>Genre Contrat : </div></td><td width='53%'><select name='select_genre[]'><option value=''></option>{option_genre}</select></td></tr></table>";	
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<tr><td><div id="ligne_famille">
	  <!-- BEGIN LISTE -->
	  <table width="100%" border="0" cellspacing="1" cellpadding="0" >
	  <tr>
        <td width="23%" align="center"><div align="left">Famille Contrat : </div></td>
        <td width="34%"><select name="select_famille[]">
          <option value=""></option>
          {option_famille}
        </select></td>
        <td width="14%"><div align="left">Genre Contrat : </div></td>
        <td width="29%"><select name="select_genre[]">
          <option value=""></option>
          {option_genre}
        </select></td>
      </tr>
    </table>
	<!-- END LISTE --></div></td>
	<tr>
        <td colspan="4" align="left">
            <input type="button" name="plus_famille" value="PLUS" onclick="addvar()"/>
      </td>
      </tr>

Merci d'avance

07/04/2009, 14h45
Msieurduss

Citation:

Envoyé par E.Bzz

Plutôt quand ne pas l'utiliser :
surtout pas pour mettre à jour le contenu d'un formulaire (avec IE en tous cas) : les modifications n'affecteraient que l'affichage et ne seraient pas prises en compte lors de l'envoie du formulaire.

Euh, tu es sûr de toi ?
J'ai une liste d'un formulaire qui est réécrite avec innerHTML (et appel Ajax dans une base de données) et ça fonctionne très bien...
Ou alors je t'ai mal compris ?
07/04/2009, 14h49
E.Bzz

Citation:

Envoyé par Msieurduss

Euh, tu es sûr de toi ?
J'ai une liste d'un formulaire qui est réécrite avec innerHTML (et appel Ajax dans une base de données) et ça fonctionne très bien...
Ou alors je t'ai mal compris ?

Une liste de formulaire ?
Un select dans un formulaire ?

Pour le 2°, si l'objet existe déjà => OK.
Si tu l'ajoutes via Ajax => KO :aie:

Ceci dit ma remarque concerne IE6 (pas testé en 7)

A+
07/04/2009, 14h49
Bovino

Citation:

Envoyé par Msieurduss

Euh, tu es sûr de toi ?
J'ai une liste d'un formulaire qui est réécrite avec innerHTML (et appel Ajax dans une base de données) et ça fonctionne très bien...
Ou alors je t'ai mal compris ?

Pourtant il a raison, IE est incapable d'attribuer un name dynamiquement, donc pas de name, pas de transmission de valeur sur le submit !
Ceci dit, pour l'anecdote, il me semble que dans ce cas, c'est IE qui respecte les standards car le name d'un élément est censé être readonly il me semble 8O8O8O
07/04/2009, 14h51
E.Bzz

Citation:

Envoyé par Bovino

dans ce cas, c'est IE qui respecte les standards

Une règle doit toujours être confirmée par une exception :mouarf:
07/04/2009, 15h01
Msieurduss

Ah okay, je ne savais pas :)
En l'occurrence, l'objet existe déjà...

Il y a déjà une liste avec son "name", et la requête Ajax ne fait que rajouter des options dans la liste.
Intéressant à savoir en tout cas... !
07/04/2009, 15h07
RomainVALERI

En tout cas, pour l'utilisation / l'utilité d'innerHTML, disons pour schématiser que : quand on a une toute petite modification à faire sur une page, on peut l'utiliser pour "gagner du temps" sur l'écriture d'un code "propre" modifiant la page en manipulant le DOM. Par contre, dès qu'on impacte plus lourdement la structure de la page, qu'on crée des éléments qu'on va réutiliser plus tard (notamment les input des forms comme le soulignent nos gourous ci-postants ;)), c'est un dangereux raccourci, qui posera problème dans de nombreuses situations, car il crée une différence entre la page telle qu'elle est chargée en mémoire dans le navigateur et celle de la source originale... ^^
07/04/2009, 15h11
E.Bzz

Citation:

Envoyé par RomainVALERI

car il crée une différence entre la page telle qu'elle est chargée en mémoire dans le navigateur et celle de la source originale... ^^

A noter pour ce dernier point que c'est le cas de toutes les modifications faites via JS ;)

A+
07/04/2009, 15h20
RomainVALERI

Citation:

Envoyé par E.Bzz

A noter pour ce dernier point que c'est le cas de toutes les modifications faites via JS ;)

A+

Hum ^^ oui je me suis mal exprimé : je veux dire un décalage entre l'affichage dans la page du navigateur et le modèle objet qui représente la page en mémoire (et à partir duquel sont effectués certains traitements de base comme le submit... ^^)

(ce qui, en effet, est assez différent de ce que j'ai essayé de dire précédemment :aie: )
07/04/2009, 15h23
E.Bzz

Citation:

Envoyé par RomainVALERI

Hum ^^ oui je me suis mal exprimé

Je m'en doutais bien ;)

A+