Instructions interprétées dans le désordre

Version imprimable

Bonjour.
Je n'en suis pas à mon premier JavaScript, mais là je ne comprend vraiment pas ce qui se passe. J'ai un div dont l'id est 'texte' et je tente de gérer son contenu avec du JavaScript. Voici le code :
Code:

1 2 3 4 5 6 document.getElementById('texte').innerHTML = '<div style="margin: 30px; text-align: justify;">'; document.getElementById('texte').innerHTML += 'bla bla bla'; document.getElementById('texte').innerHTML += '<br><img src="img_contenu/toto.jpg" alt="" style="margin: 5%; width: 90%;"><br>'; document.getElementById('texte').innerHTML += 'blo blo blo'; document.getElementById('texte').innerHTML += '</div>'; alert(document.getElementById('texte').innerHTML);
Bref, tout simple quoi.

Et voici le résultat tel qu'il apparait dans la boite de l'alert :

Code:

<div style="margin: 30px; text-align: justify;"></div>bla bla bla<br><img src="img_contenu/toto.jpg" alt="" style="margin: 5%; width: 90%;"><br>blo blo blo

Effectivement, les textes et l'image ne bénéficient pas de la marge de 30px, ni de l'alignement, comme si JS ne prenait pas mes insctructions dans l'ordre où je les lui donne.

D'où le problème peut-il bien venir ?
Merci d'avance

Ok, j'ai toujours pas compris où était le problème, mais j'ai trouvé comment le contourner : au lieu de faire la concaténation en JavaScript, je la fais en PHP de manière à n'avoir qu'une seule instruction JS, et ça marche.

Le code :
Code:

1 2 3 4 5 6 7 <?php $phrase = "<div style=\"margin: 30px; text-align: justify;\">"; $phrase .= "bla bla bla"; $phrase .= "<br><img src=\"img_contenu/".mysql_result($res, 0, 'Img')."\" alt=\"\" style=\"margin: 5%; width: 90%;\"><br>"; $phrase .= "blo blo blo"; echo "document.getElementById('texte').innerHTML += '".$phrase."</div>';"; ?>

Là ce n'est pas de la concaténation, tu réaffectes 5 fois le innerHTML de ton élement. A chaque fois le browser réinterprète ton code, donc s'il voit une balise <div> non fermée, il la ferme automatiquement pour que le HTML soit valide.

Voilà comment on concantène :
Code:

1 2 3 4 5 6 document.getElementById('texte').innerHTML = '<div style="margin: 30px; text-align: justify;">' + 'bla bla bla' + '<br><img src="img_contenu/toto.jpg" alt="" style="margin: 5%; width: 90%;"><br>' + 'blo blo blo' + '</div>';

encore une raison qui me fait dire que mieux vaut s'en remettre au DOM qu'a innerHTML

innerHTML N'EST PAS une propriété c'est un setter (un equivalent serait une méthode setDOMChildrensWithHTMLSourceCode(..)) donc losqu'on l'utilise on exécute en réalité un appel de methode

et comme expliqué ci-dessus cet appel interprète le code HTML fourni
donc son usage est

Code:

1
2
3
4
5
6
var myDivCode = '<div style="margin: 30px; text-align: justify;">';
myDivCode += 'bla bla bla';
myDivCode += '<br /><img src="img_contenu/toto.jpg" alt="" style="margin: 5%; width: 90%;"><br />';
myDivCode += 'blo blo blo';
myDivCode += '</div>';
document.getElementById('texte').innerHTML = myDivCode

je préfère tout de même le DOM qui
1) ne fait pas appel à l'interprète HTML,
2) permet de bien structurer ses élements HTML,
3) permet d'avoir des références à ces objets HTML pour les exploité en javascript,
4) permet d'utiliser les valeurs des variables directement.
je reconnais que le code est plus verbeux mais il est sans ambiguité (interprétation html)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
var myDiv = document.createElement('DIV');
myDiv.style.margin='30px';
myDiv.style.textAlign='justify';
myDiv.appendStyle(document.createTextNode('bla bla bla'));
myDiv.appendChild(document.createElement('BR'));
var myImg = document.createElement('IMG');
myImg.setAttribute('src','img_contenu/toto.jpg');
myImg.style.margin='5%';
myImg.style.width='90%';
myDiv.appendChild(myIng);
myDiv.appendChild(document.createElement('BR'));
myDiv.appendStyle(document.createTextNode('blo blo blo'));
document.getElementById('texte').appendElement(myDiv);

pour illustrer le point 3) voici un bout de code.

Code:

1
2
3
4
5
6
7
8
9
10
function setDiv(id) {
  var myDivCode = '<div style="id: ';
  myDivCode += id; //on est obligé d'ajouter un id
  myDivCode += ' margin: 30px; text-align: justify;">';
  document.getElementById('texte').innerHTML = myDivCode;
}
function changeBgColor(id, color) {
  //il est nécéssaire de crechercher le div créé dans le dom car on n'a pas de référence
  document.getElementById(id).style.backgroundColor=color;
}

le même avec le DOM

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function setDiv(color) {
  var myDiv = document.createElement('DIV');
  myDiv.style.backgroundColor=color; //on utilise ici directement la variable
  myDiv.style.margin='30px'; 
  myDiv.style.textAlign='justify';
  document.getElementById('texte').appendElement(myDiv);
  return myDiv; //on garde la référence à l'obet créé
}
function changeBgColor(div, color) {
  //on a déjà une référrence à l'objet pas besoin de le chercher on l'utilise
  div.style.backgroundColor=color;
}

pour illustrer mon propos sur le point 4) voici un bout de code.

Code:

1
2
3
4
5
6
function setDiv(color) {
  var myDivCode = '<div style="background-color: ';
  myDivCode += color //on est obligé ici lorsqu'on a beaucoup de variable de socissonner son code jusqu'à le rendre illisible
  myDivCode += ' margin: 30px; text-align: justify;">';
  document.getElementById('texte').innerHTML = myDivCode;
}

le même avec le DOM

Code:

1
2
3
4
5
6
7
function setDiv(color) {
  var myDiv = document.createElement('DIV');
  myDiv.style.backgroundColor=color; //on utilise ici directement la variable
  myDiv.style.margin='30px'; 
  myDiv.style.textAlign='justify';
  document.getElementById('texte').appendElement(myDiv);
}

A+JYT

01/12/2012, 14h56
Auteur

bonjour,

pour insérer des balises HTML dans ton document je te conseille vivement de passer par des fonctions DOM (createElement, appendChild, etc.) plutôt que d'utiliser innerHTML ;)