Discussion :

[lirycs78]

Bonsoir,

J'ai un probléme avec innerHTML qui manifestement ne fonctionne pas sous IE ( 7 je précise ) J'aimerais savoir si il existe une alternative a cette fonction, car j'ai besoins que le code qui soit affecter a l'aide de innerHTMLn soit interpréter et non du texte brute comme avec createNodeText.

Merci

[andry.aime]

Bonjour,

innerHTML fonctionne bien sous IE 7.
Le problème est ailleurs. tu peux nous montrer ton code?

A+.

[sekaijin]

Oui la méthode standard supporté par tout moteur js

document.createElement

verbeux mais sur à 100% (pas d'interprétation de du HTML par le navigateur donc identique quelque soit le navigateur)

A+JYT

[Bovino]

document.createElement

verbeux mais sur à 100% (pas d'interprétation de du HTML par le navigateur donc identique quelque soit le navigateur)

Il semble en revanche que les dernières versions de certains navigateurs rendent cette méthode plus rapide que innerHTML.

[sekaijin]

surtout que certaine lib rendent ça plus concis et simple à mettre en œuvre
comme ce hello word

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  /* ajouté un méthode au démarrage */
  document.onLoad.push(function() {
    alert(1);
  });
  /* créer la page */
  document.Html(
    {
      lang:'fr',
      xmlns:'http://www.w3.org/1999/xhtml',
      'xml:lang':'fr'
    },null,
    {
      foo: function() {
        alert(this.nodeName + ': ' + this.clientWidth + ' X ' + this.clientHeight);
      }
    })
    .Head({'xmlns:x':'urn:org.truc.nc'})
      .Title('Test de page  DOM').parentNode.parentNode
    .Body(null,{backgroundColor: 'rgb(128,0,0)'})
      .H1('Hello',null,{margin:'auto', width:'150px', textAlign:'center', backgroundColor: 'rgb(255,255,255)'}).parentNode
      .P({
        'class':'corpus',
        id:'150',
        title:'corps',
        lang:'fr',
        'xml:lang':'fr',
        dir:'rtl'
      },{
        margin:'auto',
        padding:'15px',
        width:'90%',
        height:document.body.clientHeight - 100,
        textAlign:'left',
        backgroundColor: 'rgb(255,255,255)'
      },{
        onclick: function() {
          document.html.foo();
        }
      }).B('World');
 
  /* ajouter de niuveau une autre methode au démarage */
  document.onLoad.push(function() {
    document.body.style.backgroundColor = 'rgb(0,128,255)';
  });
  /* ajouter dynamiquement du contenu dans l'élément d'id 150 */
  document.getElementById('150').Br().Text('Somme text').Br()
  .AHref('sample.js', 'view code', {target:'_source'})

pour le code
page 159 o
lib 8.3 ko
js 1.3 ko

sur ma machine temps de chargement 163ms

le code source de cette page est peu orthodoxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script charset="iso-8859-1" src="htmlxtdom.js" type="text/javascript"></script>
<script charset="iso-8859-1" src="sample.js" type="text/javascript"></script>

vous avez là 100% du source

ce n'est qu'un exemple la lib n'est pas mature donc pas exploitable en l'état
mais cela permet de montrer que js utilisant le DOM pour ce qu'il sait faire est efficace

il s'agit d'un DSL pour le DOM (Domain Spécific Language)
A+JYT
PS: perso j'utilise ExtJs beaucoup plus gourmand en ressources mais mature et riche il y en a plein

[dukej]

surtout que certaine lib rendent ça plus concis et simple à mettre en œuvre
comme ce hello word

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
  /* ajouté un méthode au démarrage */
  document.onLoad.push(function() {
    alert(1);
  });
  /* créer la page */
  document.Html(
    {
      lang:'fr',
      xmlns:'http://www.w3.org/1999/xhtml',
      'xml:lang':'fr'
    },null,
    {
      foo: function() {
        alert(this.nodeName + ': ' + this.clientWidth + ' X ' + this.clientHeight);
      }
    })
    .Head({'xmlns:x':'urn:org.truc.nc'})
      .Title('Test de page  DOM').parentNode.parentNode
    .Body(null,{backgroundColor: 'rgb(128,0,0)'})
      .H1('Hello',null,{margin:'auto', width:'150px', textAlign:'center', backgroundColor: 'rgb(255,255,255)'}).parentNode
      .P({
        'class':'corpus',
        id:'150',
        title:'corps',
        lang:'fr',
        'xml:lang':'fr',
        dir:'rtl'
      },{
        margin:'auto',
        padding:'15px',
        width:'90%',
        height:document.body.clientHeight - 100,
        textAlign:'left',
        backgroundColor: 'rgb(255,255,255)'
      },{
        onclick: function() {
          document.html.foo();
        }
      }).B('World');
 
  /* ajouter de niuveau une autre methode au démarage */
  document.onLoad.push(function() {
    document.body.style.backgroundColor = 'rgb(0,128,255)';
  });
  /* ajouter dynamiquement du contenu dans l'élément d'id 150 */
  document.getElementById('150').Br().Text('Somme text').Br()
  .AHref('sample.js', 'view code', {target:'_source'})

pour le code
page 159 o
lib 8.3 ko
js 1.3 ko

sur ma machine temps de chargement 163ms

le code source de cette page est peu orthodoxe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<script charset="iso-8859-1" src="htmlxtdom.js" type="text/javascript"></script>
<script charset="iso-8859-1" src="sample.js" type="text/javascript"></script>

vous avez là 100% du source

ce n'est qu'un exemple la lib n'est pas mature donc pas exploitable en l'état
mais cela permet de montrer que js utilisant le DOM pour ce qu'il sait faire est efficace

il s'agit d'un DSL pour le DOM (Domain Spécific Language)
A+JYT
PS: perso j'utilise ExtJs beaucoup plus gourmand en ressources mais mature et riche il y en a plein

Ouais mais bonjour la lecture du truc, alors que si tu utilises des templates HTML stockés dans des XML, bonjour la simplicité pour les modifier, et on peut aussi faire de la XSL si on veut innerHTML a encore de beaux jours devant lui dans certains cas

[sekaijin]

c'est un point de vu car l'équivalent de

Code javascript :

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
.P({
  'class':'corpus',
  id:'150',
  title:'corps',
  lang:'fr',
  'xml:lang':'fr',
  dir:'rtl'
},{
  margin:'auto',
  padding:'15px',
  width:'90%',
  height:document.body.clientHeight - 100,
  textAlign:'left',
  backgroundColor: 'rgb(255,255,255)'
},{
  onclick: function() {
    document.html.foo();
  }
}).B('World')

est

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<P
  class="corpus"
  id="150"
  title="corps"
  lang="fr"
  xml:lang="fr"
  dir="rtl"
  onClick="document.html.foo();"
  style="margin:auto, padding:15px, width:90%, textAlign:left, background-color: rgb(255 255 255)"
><B>World</B></P>

plus un script à activer dans le onload

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script charset=iso-8859-1 type="text/javascript">
function modify_paragraph() {
  var paragraph = document.getElementById(150);
  paragraph.style.height=document.body.clientHeight - 100;
}</script>

Je ne sais le quel des deux est le plus lisible ...
Un qui définit tout le paragraphe selon un syntaxe unique et en une seule fois ou l'autre qui mixe trois syntaxe dans trois langages à deux endroits différents. plus un appel à placer dans une troisième partie

je pense que c'est une vision très personnelle que de dire que le HTML est plus lisible.

A+JYT

[dukej]

c'est un point de vu car l'équivalent de

Code javascript :

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
.P({
  'class':'corpus',
  id:'150',
  title:'corps',
  lang:'fr',
  'xml:lang':'fr',
  dir:'rtl'
},{
  margin:'auto',
  padding:'15px',
  width:'90%',
  height:document.body.clientHeight - 100,
  textAlign:'left',
  backgroundColor: 'rgb(255,255,255)'
},{
  onclick: function() {
    document.html.foo();
  }
}).B('World')

est

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<P
  class="corpus"
  id="150"
  title="corps"
  lang="fr"
  xml:lang="fr"
  dir="rtl"
  onClick="document.html.foo();"
  style="margin:auto, padding:15px, width:90%, textAlign:left, background-color: rgb(255 255 255)"
><B>World</B></P>

plus un script à activer dans le onload

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script charset=iso-8859-1 type="text/javascript">
function modify_paragraph() {
  var paragraph = document.getElementById(150);
  paragraph.style.height=document.body.clientHeight - 100;
}</script>

Je ne sais le quel des deux est le plus lisible ...
Un qui définit tout le paragraphe selon un syntaxe unique et en une seule fois ou l'autre qui mixe trois syntaxe dans trois langages à deux endroits différents. plus un appel à placer dans une troisième partie

je pense que c'est une vision très personnelle que de dire que le HTML est plus lisible.

A+JYT

Ben si tu sépares le code métier de la vue, et en plus en séparant le rendu visuel (css), là ton truc il tombe à l'eau et fout plus le bordel qu'autre chose

[sekaijin]

c'est bien ce que je dis c'est un point de vu car si tu utilise un innerHtml c'est que tu est dans une partie dynamique et non dans un code HTML statique d'une page et que donc tu vas faire des truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
html = '<P  class="'+corpus+'"  id="'+id'+"  .....;
monTag.innerHtml = html'

j'iagine la somme de ' " + et mélange de chaîne pour obtenir un grid avec scroll tri sur les colonnes et tous le reste
alors que pour accrocher un grid dynamiquement un simple appel d'une fonction fait la même chose en js

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
.AHref('#', 'add grid', null, null,{
  onclick:function() {
   this.GridPanel({
        store: store,
        columns: [
            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
  }
})

bref rien n'empêche de séparer les couche en javascript et la plus par des lib basé sur la construction plutôt que sur la modification du HTML permettes de construire directement les objet don on a besoin

alors que pour produire la même chose avec du innerHtml il faut concaténer des dizaine de chaîne avec des variables pour produire un HTML interprétable par le navigateur
manipuler les éléments crée en JS pour ajouter une gestion des événements associés aux objets crées.

C'est juste une question de choix je préfère n'avoir qu'un seul langage crée directement les objet dont j'ai besoin avec les attributs les méthodes et les événements qui les concerne plutôt que de créer du HTML essayer de tenir compte des différentes façon dont les navigateurs vont 'interpréter. puis ensuite manipuler les objets crée pour leur associer des méthodes et des événements.

mais je ne dis pas que ce soit une mauvaise approche. Elle a ses avantages
mais pour moi la lisibilité n'en fait pas partie.

A+JYT

[dukej]

c'est bien ce que je dis c'est un point de vu car si tu utilise un innerHtml c'est que tu est dans une partie dynamique et non dans un code HTML statique d'une page et que donc tu vas faire des truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
html = '<P  class="'+corpus+'"  id="'+id'+"  .....;
monTag.innerHtml = html'

ôte moi ce code moche de la vue, jamais dans ma vie je n'irai faire ça.

Au pire j'irai plutôt faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
html = '<p class="{0}" id="{1}"' ....;
monTag.innerHtml = StringUtil.substitute(html, corpus, id);

C'est plus propre et plus lisible.

Mais quand il est question de gros bloc de code HTML dans lequel il faut injecter de la donnée, par exemple un objet représentant un voyage, et tout ça au final fait une liste de voyage.
Ben pour le HTML j'ai tout ça qui est stocké dans un XML contenant des noeuds en CDATA qui contiennent les templates HTML.

Au final j'aurai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<noeudbidule>
<![CDATA[
  <p class="${classname}" id="${id}" ....;
]>
</noeudbidule>

Ensuite j'utilie une fonction qui m'injecte un objet JS dans le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
html = new Injection(template, {
  classname:corpus,
  id:id
});

Mais moi je parle surtout pour du code custom avec du HTML massif, si tu veux en PV je te montrerai un exemple concret de ce truc sur un projet online, c'est plus ou moins réussit :/

j'iagine la somme de ' " + et mélange de chaîne pour obtenir un grid avec scroll tri sur les colonnes et tous le reste
alors que pour accrocher un grid dynamiquement un simple appel d'une fonction fait la même chose en js

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
.AHref('#', 'add grid', null, null,{
  onclick:function() {
   this.GridPanel({
        store: store,
        columns: [
            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });
  }
})

Dans le cas de la grid, là oui ça peut faire largement gagner du temps, on va dire que moi je parle pour des cas customs avec gros pavé de HTML. Un truc surtout fait pour les sites, moins pour de l'applicatif

bref rien n'empêche de séparer les couche en javascript et la plus par des lib basé sur la construction plutôt que sur la modification du HTML permettes de construire directement les objet don on a besoin

alors que pour produire la même chose avec du innerHtml il faut concaténer des dizaine de chaîne avec des variables pour produire un HTML interprétable par le navigateur
manipuler les éléments crée en JS pour ajouter une gestion des événements associés aux objets crées.

C'est juste une question de choix je préfère n'avoir qu'un seul langage crée directement les objet dont j'ai besoin avec les attributs les méthodes et les événements qui les concerne plutôt que de créer du HTML essayer de tenir compte des différentes façon dont les navigateurs vont 'interpréter. puis ensuite manipuler les objets crée pour leur associer des méthodes et des événements.

mais je ne dis pas que ce soit une mauvaise approche. Elle a ses avantages
mais pour moi la lisibilité n'en fait pas partie.

A+JYT

Déjà on concatène pas, on met dans un tableau et on join ensuite
Et puis comme je l'ai montré un peu plus haut, je travaille plus sur des templates ou j'injecte les datas que de la concaténation sauvage qui pourrit la lisibilité du code

Donc au final on est d'accord tous les deux :o