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] createElement VS innerHTML


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre Expert
    Avatar de Gruik
    Profil pro
    Développeur Web
    Inscrit en
    Juillet 2003
    Messages
    1 566
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2003
    Messages : 1 566
    Par défaut [DOM] createElement VS innerHTML
    Salut,

    J'ai maintenant une petite experience en applications js qui créent des éléments dynamiquement, à l'aide de document.createElement() puis de l'utilisation des propriétés DOM pour modifier des attributs aux éléments (className, id, setAttribute...)
    Cette approche me semble plus clean, mais on se rend compte qu'on doit ecrire toute une tartine pour pas grand chose, alors qu'avec innerHTML, on pourrait créer une bonne partie du code HTML facilement.

    Donc qu'en pensez vous?
    Merci

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    le souci est qu'avec innerHTML les objets ne sont pas vraiment instanciés ...
    innerHTML est à utiliser avec parsimonie (si elle est dans le coin ...) pour modifier du texte par exemple ...
    createElement du DOM permet le creation propre d'objets et permet également de leur attribuer des evènements ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Modérateur
    Avatar de OButterlin
    Homme Profil pro
    Inscrit en
    Novembre 2006
    Messages
    7 313
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Novembre 2006
    Messages : 7 313
    Billets dans le blog
    1
    Par défaut
    Je préfère la méthode document.getElementById('nom_cible').innerHTML pour créer des éléments d'IHM, beaucoup plus compacte, plus facile pour le debug (avec alert) mais il faut relativiser : si le problème était d'insérer une colonne dans un tableau, les méthodes DOM seraient bien plus appropriées...

    Ce n'est que mon avis...

    A+
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  4. #4
    Membre Expert
    Avatar de Gruik
    Profil pro
    Développeur Web
    Inscrit en
    Juillet 2003
    Messages
    1 566
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2003
    Messages : 1 566
    Par défaut
    Ok merci
    Sinon, j'ai eu un cas où innerHTML était la seule solution :
    C'est lorsqu'on doit créer des champs de formulaire, on ne peut pas affecter la propriété "name" sous IE (merci IE), c'est pourtant obligatoire si on a des radio boutons meme si on a pas de vrai formulaire.

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    ? on ne peut pas affecter de name sous IE ???
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre Expert
    Avatar de Gruik
    Profil pro
    Développeur Web
    Inscrit en
    Juillet 2003
    Messages
    1 566
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2003
    Messages : 1 566
    Par défaut
    Oui
    The NAME attribute cannot be set at run time on elements dynamically created with the createElement method. To create an element with a name attribute, include the attribute and value when using the createElement method.
    http://msdn.microsoft.com/workshop/a...ies/name_2.asp

    Enfin, la ils utilisent leur createElement perso qui est pas du tout standard, donc innerHTML est la seule solution portable

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    ha oui mais faut le faire au moment du createElement ...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
     
    <script type='text/javascript'>
    for (i=0;i<10;i++){
    var item= document.createElement("<input type='radio' NAME='monradio' value='"+i+"/>");
    document.body.appendChild(item)
    }
    </script>
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. [DOM] Interprétation du innerHTML
    Par arnogb69 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 18/11/2008, 09h42
  2. [DOM] pb execution innerHTML sous firefox
    Par durthu dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 18/09/2007, 11h55
  3. [DOM] getElementById et InnerHtml
    Par lekunfry dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 12/08/2007, 08h25
  4. [DOM] Editer l'innerHTML d'une popup
    Par thomzon dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 19/06/2007, 12h20
  5. [DOM] DOM : createElement d'une balise script dans le HEAD
    Par Mike_69 dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 05/04/2007, 14h31

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