IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] fonctionalité et utilité de innerHTML


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : Madagascar

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 26
    Par défaut [DOM] fonctionalité et utilité de innerHTML
    Bonjour!
    je voudrais savoir la fonctionnalité et l'utilité de innerHTML.
    Merci !

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    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;

  3. #3
    Membre éclairé
    Inscrit en
    Avril 2007
    Messages
    483
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations forums :
    Inscription : Avril 2007
    Messages : 483
    Par défaut
    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)

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par Sh4dow49 Voir le message
    (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
    (et dans ce cas, plus de restrictions)

    A+

  5. #5
    Membre éclairé
    Inscrit en
    Avril 2007
    Messages
    483
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations forums :
    Inscription : Avril 2007
    Messages : 483
    Par défaut
    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)

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par Sh4dow49 Voir le message
    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+

  7. #7
    Membre averti
    Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : Madagascar

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 26
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Juin 2006
    Messages
    216
    Détails du profil
    Informations personnelles :
    Localisation : France, Gironde (Aquitaine)

    Informations forums :
    Inscription : Juin 2006
    Messages : 216
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    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 ?

  9. #9
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par Msieurduss Voir le message
    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

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

    A+

  10. #10
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Citation Envoyé par Msieurduss Voir le message
    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
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  11. #11
    Membre averti
    Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    26
    Détails du profil
    Informations personnelles :
    Localisation : Madagascar

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 26
    Par défaut
    Merci mais quand et comment alors l'utiliser. si possible avec un exemple

  12. #12
    Membre éclairé
    Inscrit en
    Avril 2007
    Messages
    483
    Détails du profil
    Informations personnelles :
    Âge : 37

    Informations forums :
    Inscription : Avril 2007
    Messages : 483
    Par défaut
    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

Discussions similaires

  1. [DOM] Générer un tableau avec innerHTML
    Par Setsuna_00 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 08/06/2009, 17h02
  2. [DOM] Interpréter du HTML sans innerHTML
    Par Bisûnûrs dans le forum Général JavaScript
    Réponses: 28
    Dernier message: 04/02/2009, 08h42
  3. [DOM] innerHTML et <table>
    Par djayp dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 01/02/2008, 13h21
  4. [DOM] innerHTML value input firefox
    Par Teufboy dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 23/08/2007, 10h07
  5. [DOM] L'équivalent de innerHtml existe-t-il sans parser ?
    Par zefrit dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 28/09/2005, 19h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo