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