InnerHTML / ie8 [Résolu]

Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
- - Dernière réponse : jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
- 8 août 2010 à 16:09
Bonsoir,

J'ai un problème avec innerHTML sous ie8, dans mes recherches j'ai pu lire que le problème se posait lors d'injection d'une table, or moi je n'ai pas de table :

// Creer un element et y insere un message d'erreur
function make_error(err, divName) {
// make_element -> creer un div -> OK
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
// pour injecter le message dans le div crée avec ie8 -> pas ok,
//if(getId('err'+divName).innerHTML) {
getId('err'+divName).innerHTML = err;
//} else {
//getId('err'+divName).innerText = err;
//}
}


Comme vous pouvez voir, j'ai essayé de faire un sorte de test qui visiblement ne fonctionne pas :

avec ie8 innerText fonctionne, mais ca ne fonctionne plus sous FF
et inversement innerHTML fonctionne avec FF mais plus sous ie8 :s

avez-vous une solution (dans l'idée du test), hormis celle d'une fonction de test de navigateur ?

Merci bien !
Afficher la suite 

Votre réponse

20 réponses

Meilleure réponse
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3
Merci
[*] avec ie8 innerText fonctionne, mais ca ne fonctionne plus sous FF

innerText n'existe pas dans Firefox, tu dois plutôt utiliser textContent.
element=document.createElement("div");
if(element.innerText){
element.innerText="Hello World";
}
else if(element.textContent){
element.textContent="Hello World";
}
else{
element.style.content="Hello World";
}


Bonne soirée et bonnes vacances, je pars 2 semaines



JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 116 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jdmcreator
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
3
Merci
tu es surement dans le cas ou IE n'a pas encore finalisé l'ajout de l'élément dans l'arbre DOM.
Il faut croire oui même si çà reste extrêmement curieux, l'élément est correctement crée et existe.

Pourquoi ne pas récupérer l'objet en retour de la fonction make_element directement et de lui affecter son innerHTML.
Oui j'ai envisagé cette possibilité mais la fonction étant déjà pas mal utilisé par ailleurs ça m'ennuyais d'avoir à modifier tous les appels.
Je vais essayer en rajoutant un paramètre à la fonction pour le code html

Après modifs :
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName, err);



// Creer un element
function make_element(eType, eId, eStyle, eParent, eContent) {
if(!getId(eId)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.setAttribute('style', eStyle);
if(eContent) {
elem.innerHTML = eContent;
}
getId(eParent).appendChild(elem);
}
}


Génial ! çà fonctionne !
Vraiment un grand merci pour ton aide précieuse !

Si je peut profiter un peu :) :
L'idée c'est un formulaire qui valide les champs de saisie au fur et à mesure avec un onblur="verif(this, this.form)" pour chaque champs.
Mes connaissances sont limités dans ce domaine : y aurait il un autre moyen d'executer l'action sur chaque champs sans avoir a mettre mon appel dans chaque input ?
Esperant avoir été clair ^^

Dire « Merci » 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 116 internautes nous ont dit merci ce mois-ci

Commenter la réponse de cs_moumouf
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
Bonjour,
innerHTML doit exister sous IE8, je ne le possède pas mais j'en reste persuadé...

C'est la façon de l'appeler après ta fonction de création qui ne plait pas à IE
var O_Div = document.createElement('DIV');
document.body.appendChild( O_Div);
O_Div.innerHTML = "XXXXXXXXXXX";
doit marcher...

;O)
Commenter la réponse de PetoleTeam
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
super merci à vous deux, je ne connaissais pas textContent, je vais tester çà de ce pas.

et bonnes vacances veinard ;)
Commenter la réponse de cs_moumouf
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
if(getId('err'+divName).innerText) {
getId('err'+divName).innerText = err;
}
else if(getId('err'+divName).textContent) {
getId('err'+divName).textContent = err;
}
else {
getId('err'+divName).innerHTML = err;
}


Avec ie8 ou FF on passe dans la dernière condition, les 2 premières ne sont pas utilisés et l'erreur est la même

Petrole team > c'est vraiment bizarre, mon code est très simple et pourtant avec ie8 j'ai ce message : "erreur d'execution inconnue" lorsque je tente d'utiliser innerHTML sur ce code. Mais, j'ai un autre site avec des appels ajax et là le code est correctement recraché (via un innerHTML) et il fonctionne très bien sous ie8...
bizarre vous avez dit bizarre ?
Commenter la réponse de cs_moumouf
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
vous l'aurez compris de vous même : getId(monId) = document.getElementById(monId)
Commenter la réponse de cs_moumouf
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
Bonjour,
en fait je n'avais lu que le titre...
Lorsque tu fais un test comme le tien
if( getId('err'+divName).innerHTML)
en fait tu testes que la valeur existe et non que la caractèristique existe.
Comme tu viens de créer la DIV, son innerHTML est vide d'ou une réaction normale.

Pour vérifier que la caractèristique existe il te faut faire
if( getId('err'+divName).innerHTML != "undefined")

la première méthode de test est souvent utilisée de façon incorrecte

Mais pourquoi faire ce test ?
;O)
Commenter la réponse de PetoleTeam
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
oui en effet c'est assez logique... ;)
le test permet de savoir si le navigateur supporte innerHTML ou innerTEXT
parce que je t'assures que dans mon cas ie8 ne veut pas entendre parler de innerHTML
Je toast ta methode
Commenter la réponse de cs_moumouf
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
function make_error(err, divName) {
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
if(getId('err'+divName).innerHTML != "undefined") {
getId('err'+divName).innerHTML = err;
}
else {
getId('err'+divName).innerText = err;
}
}


ie8 passe dans la première condition et me dit : Erreur d'exécution inconnue pour getId('err'+divName).innerHTML = err;
FF est content (comme toujours :p)
Commenter la réponse de cs_moumouf
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
var O_Div = document.createElement('DIV');
document.body.appendChild( O_Div);
O_Div.innerHTML = "XXXXXXXXXXX";


Nouvel indice, ce code fonctionne avec ie8 et FF, le problème ne vient donc pas de là.

Mais :
function make_error(err, divName) {
make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
if(getId('err'+divName)) {
getId('err'+divName).innerHTML = err;
}
}


Pourquoi j'ai une erreur avec ce code sous ie8 uniquement alors que le test d'existence du div est bien validé ?
le test est validé
Commenter la réponse de cs_moumouf
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
Dernière info pouvant aider : code permettant la création du div

// Creer un element
function make_element(eType, eId, eStyle, eParent) {
if(!getId(eName)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.setAttribute('style', eStyle);
getId(eParent).appendChild(elem);
}
}
Commenter la réponse de cs_moumouf
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
tu es surement dans le cas ou IE n'a pas encore finalisé l'ajout de l'élément dans l'arbre DOM.

Pourquoi ne pas récupérer l'objet en retour de la fonction make_element directement et de lui affecter son innerHTML.

Pourquoi ne pas directement initialiser le innerHTML dans la fonction ?

Sinon passe par par la méthode createTextNode, mais je pense qu'un
var O_Div = make_element('div', 'err'+divName, 'font-family:arial;font-size:11px;text-align:center;color:red;', divName);
O_Div.innerHTML = err;
doit fonctionner...

;O)
Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
les messages se sont croisés
c'est quoi le eName dans la fonction ?
// Creer un element
function make_element(eType, eId, eStyle, eParent) {
  if(!getId(eType)){
    var elem = document.createElement(eType);
    elem.setAttribute('id', eId);
    elem.setAttribute('style', eStyle);
    getId(eParent).appendChild(elem);
    return( elem); // retourne l'objet cree
  }
}

avec la possibilité donc de passer le texte par défaut
// Creer un element
function make_element(eType, eId, eStyle, eParent, txt_) {
  if(!getId(eType)){
    var elem = document.createElement(eType);
    elem.setAttribute('id', eId);
    elem.setAttribute('style', eStyle);
    getId(eParent).appendChild(elem);
    if( txt_)
      elem.innerHTML = txt_; // ajout du texte
    return( elem);           // retourne l'objet cree
  }
}

;O)
Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
pardon c'est plutôt
if(!getId(eId)){

;O)
Commenter la réponse de PetoleTeam
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
lol on a fait la meme chose :)
oui j'ai modifié eName en eId pour plus de clarté en te montrant le code, j'avais oublié de modifié celui que tu as trouvé
Commenter la réponse de cs_moumouf
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
...Il faut croire oui même si çà reste extrêmement curieux, l'élément est correctement crée et existe...
crée mais pas entièrement finalisé, il est même des cas ou il faut utiliser un setTimeout avec IE

...y aurait il un autre moyen d'executer l'action sur chaque champs sans avoir a mettre mon appel dans chaque input ...
préférable d'ouvrir un nouveau topic pour plus de clarté...
;O)
Commenter la réponse de PetoleTeam
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
Commenter la réponse de cs_moumouf
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
0
Merci
Bonjour ;)

Cette fonction :
// Creer un element
function make_element(eType, eId, eStyle, eParent, eContent) {
if(!getId(eId)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.setAttribute('style', eStyle);
if(eContent) {
elem.innerHTML = eContent;
}
getId(eParent).appendChild(elem);
}
}


est plutôt à remplacer par
// Creer un element
function make_element(eType, eId, eStyle, eParent, eContent) {
if(!getId(eId)) {
var elem = document.createElement(eType);
elem.setAttribute('id', eId);
elem.textCSS=eStyle;
if(eContent) {
elem.innerHTML = eContent;
}
getId(eParent).appendChild(elem);
}
}


Cela s'utilise de la même façon et cela donne la même chose à une exception près : C'est compatible avec IE6 ;) (Je sens que je vais recevoir des mails sur la place d'IE6 sur Internet :P )



JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
Commenter la réponse de jdmcreator
Messages postés
70
Date d'inscription
lundi 3 août 2009
Statut
Membre
Dernière intervention
9 juillet 2011
0
Merci
Merci du tuyau, plus la liste de navigateur supporté est large mieux c'est !
Commenter la réponse de cs_moumouf
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
0
Merci
Tout à fait ;)


JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !
fr.jsinfo.wikia.com
Commenter la réponse de jdmcreator

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.