Publicité
+ Répondre à la discussion
Affichage des résultats 1 à 8 sur 8
  1. #1
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 547
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 547
    Points : 5 977
    Points
    5 977

    Par défaut [FAQ] Définitions : innerText, innerHTML, outerText, outerHTML

    Q : Définitions innerText, innerHTML, outerText, outerHTML
    R :
    exemple :
    Code html :
    1
    2
    3
     
     
    <p id="pg">coucou <b>tout le monde</b></p>

    innertText : récupère le contenu entre deux balises sans interprétation des balises contenu dans le texte (supprime toutes la balises contenues dans le texte récupéré).
    Code x :
    1
    2
    3
    4
    document.getElementById("pg").innerText 
    retourne 
    coucou tout le monde

    innerHTML : récupère le contenu entre deux balises avec formatage (laisse les éventuelles balises contenues dans le texte).
    Code x :
    1
    2
    3
    4
    document.getElementById("pg").innerHTML 
    retourne 
    coucou <b>tout le monde</b>


    outerText : même chose que innerText ()

    outerHTML : même chose que innerHTML mais prend également les balises qui encadrent le texte

    Code x :
    1
    2
    3
    4
    document.getElementById("pg").outerHTML 
    retourne
    <p id="pg">coucou <b>tout le monde</b></p>

    Remarques :
    innerText, outerText et outerHTML sont obsolètes
    utiliser innerHTML (d'ailleurs Firefox ne reconnait que cette fonction)

    Par ailleurs, pour ajouter de nouveaux éléments (select, div, p, span, a, form, input, etc...), il est vivement conseillé d'utiliser les méthodes du DOM (cf. ce tutotriel)

  2. #2
    Inactif Avatar de Hibou57
    Inscrit en
    mars 2006
    Messages
    852
    Détails du profil
    Informations forums :
    Inscription : mars 2006
    Messages : 852
    Points : 398
    Points
    398

    Par défaut

    Citation Envoyé par Auteur
    Par ailleurs, pour ajouter de nouveaux éléments (select, div, p, span, a, form, input, etc...), il est vivement conseillé d'utiliser les méthodes du DOM
    Le DOM est peut-être également plus efficace à l'execution. En effet, pour ajouter un élément E avec innerHTML, dans sur un source A, il faut séparer A en deux A1 et A2, qui sont des copies chacun d'une partie de A, et ensuite copier dans une autre variable le resultat A1 + E + A2, avant de l'affecter à sa place dans le document. D'où une consomation de mémoire supplémentaire, d'autant plus importante que A est volumineux (ce qui se fait formtement ressentir sur les machines modestes), et un temps d'execution évidement plus long, et finalement des réactions moins fluide, surtout si l'application fait un usage intentif des suppression/creation d'élément pendant la vie de la page (c'est-à-dire pas seulement à son initialisation).

    Donc le DOM, oui, et pas seulement parce que c'est le DOM et que c'est plus propre selon certains critères, mais aussi parce que c'est plus econome en resource mémoire et processeur.

  3. #3
    Invité de passage
    Inscrit en
    août 2009
    Messages
    3
    Détails du profil
    Informations forums :
    Inscription : août 2009
    Messages : 3
    Points : 3
    Points
    3

    Par défaut outerHTML est valide

    Depuis HTML 5, outerHTML est valide.

    Et innerHTML (mais pas outerHTML) peut être utilisé pour modifier le contenu HTML de l'élément :
    Code :
    document.getElementById("pg").innerHTML="un autre <b>contenu</b>";

  4. #4
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 547
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 547
    Points : 5 977
    Points
    5 977

    Par défaut

    Citation Envoyé par kylekatarnls Voir le message
    Et innerHTML (mais pas outerHTML) peut être utilisé pour modifier le contenu HTML de l'élément :
    Code :
    document.getElementById("pg").innerHTML="un autre <b>contenu</b>";
    moui... à utiliser avec parcimonie tout de même

  5. #5
    Responsable JavaScript & AJAX

    Avatar de vermine
    Inscrit en
    mars 2008
    Messages
    4 630
    Détails du profil
    Informations personnelles :
    Âge : 29

    Informations forums :
    Inscription : mars 2008
    Messages : 4 630
    Points : 36 775
    Points
    36 775

    Par défaut

    Et pourquoi ne pas en faire un article explicatif entre l'avant et l'après ? Ou bien une ou plusieurs Q/R pour la Faq ?

  6. #6
    Expert Confirmé Sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    5 547
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 5 547
    Points : 5 977
    Points
    5 977

    Par défaut

    Citation Envoyé par vermine Voir le message
    Et pourquoi ne pas en faire un article explicatif entre l'avant et l'après ? Ou bien une ou plusieurs Q/R pour la Faq ?
    entre l'avant et l'après ? C'est à dire ? Entre la définition postée en 2007 et la définition de 2012 ?


    Pour le DOM vs innerHTML :
    je pense que l'on peut tolérer innerHTML pour insérer un texte court et des balises utilisées pour la mise en forme (<b> <i> <u>).

    Sinon pour insérer des éléments plus complexes (<div> <span> <p>...) il faut impérativement passer par le DOM. Même chose pour les tableaux (<table> <td> <tr> etc. ) et les listes (<select> <option>), les formulaires. Je vois encore trop souvent des innertHTML pour insérer des tableaux ou des des listes dans une page pour un résultat médiocre.

  7. #7
    Invité de passage
    Profil pro Pierre-Emmanuel Bayart
    Inscrit en
    octobre 2008
    Messages
    6
    Détails du profil
    Informations personnelles :
    Nom : Pierre-Emmanuel Bayart

    Informations forums :
    Inscription : octobre 2008
    Messages : 6
    Points : 3
    Points
    3

    Par défaut même pour AJAX ?

    Citation Envoyé par Auteur Voir le message
    Sinon pour insérer des éléments plus complexes [...] il faut impérativement passer par le DOM. Même chose pour [...] les listes (<select> <option>), les formulaires. Je vois encore trop souvent des innertHTML pour insérer des tableaux ou des des listes dans une page pour un résultat médiocre.
    Oh !

    J'utilise innerHTML avec AJAX pour insérer une chaine contenant des balises OPTIONS dans un SELECT ... :

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    new Ajax.Request('lire_bdd.php', {
    	method: 'post',
    	parameters: {table: tabdd, id: id_bdd},
    	onSuccess: function(transport) {
    		$(cat).innerHTML = transport.responseText;
    		$(cat).style.display='inline';
    		},
    	onFailure: function() { alert('Requête échouée.') }
    	});
    il existe quelque chose pour le remplacer par quelque chose de plus propre utilisant le DOM ?

    merci pour votre attention,
    pierre

  8. #8
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    7 337
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 7 337
    Points : 12 783
    Points
    12 783

    Par défaut

    Bonjour,
    si tu utilises une bibliothèque, ce qui a 'air d'être le cas, passes par les méthodes fournies par celle ci, tu n'auras pas de question à te poser
    Code :
    $(cat).update(transport.responseText); // pour prototype

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •