OVH Cloud OVH Cloud

innerHTML et balise HTML

14 réponses
Avatar
Zig
comment interger du code html avec innerHTML ?

exemple 1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test innerHTML</title>
</head>

<body>
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML = '<table
cellpadding=\"2\"><tr><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td></tr></table>';"
>00</a>]
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML =
'01.01.01.01.01.01.01';" >01</a>]
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML =
'02.02.02.02.02.02.02';" >02</a>]
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML =
'03.03.03.03.03.03.03';" >03</a>]
<div id="zone">-</div>
</body>
</html>

Ca marche !?!...

mais si je rajoute des parametres (border="1") ca ne marche pas ! voir
code ci-dessou :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>test innerHTML</title>
</head>

<body>
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML = '<table border="1"
cellpadding=\"2\"><tr><td>00</td><td>00</td><td>00</td><td>00</td><td>00</td></tr></table>';"
>00</a>]
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML =
'01.01.01.01.01.01.01';" >01</a>]
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML =
'02.02.02.02.02.02.02';" >02</a>]
[<a href="javascript://"
onClick="document.getElementById('zone').innerHTML =
'03.03.03.03.03.03.03';" >03</a>]
<div id="zone">-</div>
</body>
</html>

10 réponses

1 2
Avatar
Pierre Goiffon
Zig wrote:
comment interger du code html avec innerHTML ?
(...)

si je rajoute des parametres (border="1") ca ne marche pas !


De ce que j'ai retenu des lectures ici, dès que l'on insère autre chose
que du texte "simple" (cad avec des balises html dedans) on aura des
résultats potentiellement incohérents avec innerHTML. Voir le message
récent d'ASM sur le sujet : Message-ID:
<455076c4$0$25921$

Avatar
ASM
comment interger du code html avec innerHTML ?


comme son nom l'indique c'est pour insérer du code html.

Il est prudent de ne s'en servir que pour insérer du texte entre 2
balises (éventuellement + balises simples)

pour ce que tu veux faire : tripatouiller le div 'zone'

function modif(quoi,bord,coul,fsize) {
var Z = document.getElementById('zone');
Z.innerHTML = quoi;
Z.style.border = bord;
Z.style.color = coul==''? '' : coul;
Z.style.fontSize = fsize==''? '12px' : fsize+'px';
return false;
}


<a href="#"
onClick="modif('02.02.02.02.02.02.02','1px solid blue','','24');" >02</a>
<a href="#"
onClick="modif('03.03.03.03.03.03.03','','red','');" >03</a>




--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
ASM
Zig wrote:
comment interger du code html avec innerHTML ?
(...)

si je rajoute des parametres (border="1") ca ne marche pas !


De ce que j'ai retenu des lectures ici, dès que l'on insère autre chose
que du texte "simple" (cad avec des balises html dedans) on aura des
résultats potentiellement incohérents avec innerHTML. Voir le message
récent d'ASM sur le sujet : Message-ID:
<455076c4$0$25921$


Même l'inventeur du innerHTML nous dit :
pour insérer une chaîne (de caractères) dans(*) toutes balises
except : COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT,
THEAD, TITLE, TR

et les exemples donnés sont très simples

innerHTML = '<b>gras</b> normal';

et surtout ne pas s'amuser avec le truc donné pour insérer des scripts
<http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp>


(*) comprendre :
*entre* balise ouvrante et balise fermante
et non pas *intérieur* de la balise
pour l'intérieur il y a : setAttribute(attribut, valeur);
http://fr.selfhtml.org/javascript/objets/node.htm#set_attribute


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles


Avatar
Cenekemoi
Zig wrote:
comment interger du code html avec innerHTML ?
(...)

si je rajoute des parametres (border="1") ca ne marche pas !


De ce que j'ai retenu des lectures ici, dès que l'on insère autre
chose que du texte "simple" (cad avec des balises html dedans) on
aura des résultats potentiellement incohérents avec innerHTML. Voir
le message récent d'ASM sur le sujet : Message-ID:
<455076c4$0$25921$


Perso, et ceci depuis plusieurs années, nous l'utilisons avec bonheur
pour la génération de tableau html (cad avec les balises <table>, <tr>
et <td>) sans aucun problème avec IE 5+ et FF 1.5+.

Ces tableaux peuvent contenir plusieurs milliers de cellules...

--
Cordialement, Thierry ;-)


Avatar
Pierre Goiffon
Cenekemoi wrote:
De ce que j'ai retenu des lectures ici, dès que l'on insère autre
chose que du texte "simple" (cad avec des balises html dedans) on
aura des résultats potentiellement incohérents avec innerHTML. Voir
le message récent d'ASM sur le sujet : Message-ID:
<455076c4$0$25921$


Perso, et ceci depuis plusieurs années, nous l'utilisons avec bonheur
pour la génération de tableau html (cad avec les balises <table>, <tr>
et <td>) sans aucun problème avec IE 5+ et FF 1.5+.


Tant mieux
Mais un seul contre exemple de cagade me semble suffisant pour être
prudent, pas vous ? Dans le fil que je citais ASM donne une référence à
une page où l'on peut constater le prb.


Avatar
Cenekemoi
Cenekemoi wrote:
De ce que j'ai retenu des lectures ici, dès que l'on insère autre
chose que du texte "simple" (cad avec des balises html dedans) on
aura des résultats potentiellement incohérents avec innerHTML. Voir
le message récent d'ASM sur le sujet : Message-ID:
<455076c4$0$25921$


Perso, et ceci depuis plusieurs années, nous l'utilisons avec bonheur
pour la génération de tableau html (cad avec les balises <table>,
<tr> et <td>) sans aucun problème avec IE 5+ et FF 1.5+.


Tant mieux
Mais un seul contre exemple de cagade me semble suffisant pour être
prudent, pas vous ? Dans le fil que je citais ASM donne une référence
à une page où l'on peut constater le prb.


Auriez-vous un autre lien (Google par ex) avec le fil dont vous parlez ?

En effet, avec mon pôvre OE, je n'arrive pas à retrouver les messages du
type que vous citez.
Merci d'avance

--
Cordialement, Thierry ;-)



Avatar
ASM
Cenekemoi wrote:
De ce que j'ai retenu des lectures ici, dès que l'on insère autre
chose que du texte "simple" (cad avec des balises html dedans) on
aura des résultats potentiellement incohérents avec innerHTML. Voir
le message récent d'ASM sur le sujet :




Rappel :
http://stephane.moriaux.perso.orange.fr/truc/innerHTML_danger
ou :
http://www.gtalbot.org/DHTMLSection/innerHTMLvsNodeValue.html

Perso, et ceci depuis plusieurs années, nous l'utilisons avec bonheur
pour la génération de tableau html (cad avec les balises <table>, <tr>
et <td>) sans aucun problème avec IE 5+ et FF 1.5+.



M$ semble dire qu'on ne peut utiliser innerHTML pour les tables ni les TRs

sous entendu : avec *ses* softs
et précise que c'est "non standard"
donc sans parler des possibilités des softs non M$

Tant mieux


cf plus bas

Mais un seul contre exemple de cagade me semble suffisant pour être
prudent, pas vous ?


Perso, je me méfierais car IE ne gère pas le JS scriptage des tables
comme les autres.

Et M$ de bien préciser :

[cite]
To change the contents of the *table*, *tFoot*, *tHead*, and *tr*
elements, use the *table object model* described in
How to Build Tables Dynamically :
<http://msdn.microsoft.com/workshop/author/tables/buildtables.asp>
[/cite]

De plus, bien que M$ ait prévu ses propres méthodes :
<http://msdn.microsoft.com/workshop/author/tables/buildtables.asp#TOM_Methods>
il se garde bien de les utiliser dans son exemple de script de création
de table :
<http://msdn.microsoft.com/workshop/author/tables/buildtables.asp#TOM_Indexes>
et descendre jusqu'au code exemple.
(pas essayé, mais ça semble correct même pour les brouteus standards)



========================== innerer du html de tables :
==========================
Tant qu'on reste dans du simple (même mal bâti) pourquoi pas :

function tabl(where) {
where = document.getElementById(where);
where.innerHTML '<table border=1 cellspacing=8>'+
'<tr bgcolor="#ff0"><th>intitulé 1</th>'+
'<th>intitulé 2</th></th></tr>'+
'<tr><td>ligne 1 - col 1</td><td>ligne 1 - col 1</td></td></tr>'+
'<tr><td>ligne 1 - col 1</td><td>ligne 1 - col 1</td></td></tr>'+
'</table>';
}

Et même avec du un peu plus compliqué
pour lequel si ça ne crée pas du code html "propre"
le navigateur y palie comme d'hab :

function modif(where) {
tabl(where);
var T = document.getElementById(where).getElementsByTagName('tr');
T[1].innerHTML '<tr '+
'onclick="this.style.color='red';'+
'var C=this.getElementsByTagName('td');'+
'alert(C[0].innerHTML);">'+
'<td>ligne A - col A</td><td>ligne B - col B</td></td></tr>';
}

On peut dire que ça fonctionne (mal, mais ça affiche tt de même).
(et le onclick sur le nouveau TR fonctionne)
(le brouteur s'est créé le table et son tbody manquants)

Mais alors bonjour les tentatives de modifs ultérieures via DOM de la
table créée/modifiée par modif() ...
(déjà que ce n'est pas d'la tarte avec du html propre ... !)


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles



Avatar
Pierre Goiffon
Cenekemoi wrote:
Message-ID:
<455076c4$0$25921$




Dans le fil que je citais ASM donne une référence
à une page où l'on peut constater le prb.


Auriez-vous un autre lien (Google par ex) avec le fil dont vous parlez ?


Pour retrouver un message à partir de son message-id via Google :
- ouvrir Google Groups (http://groups.google.com)
- cliquer sur "Groupes - recherche avancée"
- dans le champ "ID de message" saisir le message-id, dans les < et >
(ici : 455076c4$0$25921$)
- cliquer sur le bouton

Et hop

Sinon (je vois que vous êtes sous OE) avec Thundebird il existe la
fabuleuse extension message-id finder qui permet en un clic sur un
message-id (dans les entêtes ou dans le corps d'un message) d'ouvrir le
message depuis plusieurs sources




Avatar
ASM

Dans le fil que je citais ASM donne une référence
à une page où l'on peut constater le prb.




Cette page vient d'être complétée :
http://stephane.moriaux.perso.orange.fr/truc/innerHTML_danger


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles



Avatar
Guy
comment interger du code html avec innerHTML ?


onClick="document.getElementById('zone').innerHTML = '<table border="1"
bonjour,

essayez :
onClick="document.getElementById('zone').innerHTML = '<table border="1"
Guy

1 2