[HTML] problème : innerHTML (bizarre)

**programaniac** · 06/04/2008, 00h23

Bonsoir les gars,

voilà voilà mon problème

j'ai voulu m'amuser avec de l'ajax hihi et je m'en suis mit plein les yeux bah quel idiot de l'ajax dans les yeux c'est mauvais parce que c'est du javel on ne met pas je javel dans les yeux mais dans l'eau

hoo c'est on a compris la feinte lol

plus sérieusement

en modifiant le contenu d'une balise P qui contient un formulaire avec la propriété "innerHTML",voilà que le formulaire ne s'en retrouve pas du tout effacé mais que le texte y est ajouter.
alors que quand je fait la meme chose avec une balise div le contenu de la balise div elle est bien vidé du formulaire et remplacer par le texte

est ce que quelqu'un pourrait m'expliquer ce phénomène pour moins spécial et si il y a d'autre truc dans le genre j'aimerai avoir de plus amples informations

mais un exemple est plus parlant il vous suffit de copier coller ce bout de code dans un nouveau fichier vide et vous verrez le resultat

MERCI d'avance

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
 
<html>
<head>
<script type="text/javascript">
function changeForm()
{
        document.getElementById('Form1').innerHTML="Ici le formulaire change";
        document.getElementById('Form2').innerHTML="Ici le formulaire change PAS!!!";
}
</script>
</head>
<body>
 
<div id="Form1">
		<form>
	<input type="button" value="Formulaire 1" />
		</form>
</div>
 
<p id="Form2">
		<form>
			<input type="button" value="Formulaire 2" />
		</form>
</p>
<input type="button" onClick="changeForm()">
</body>
</html>

Bonne soirée à tous

**hellspawn_ludo** · 06/04/2008, 12h24

Bonjour programaniac,

Je viens de tester ton code et le innerHTML a bel et bien effacé les 2 formulaires. Je vois donc les 2 phrases de la fonction.

Alors, où est le hic ??

**Auteur** · 06/04/2008, 12h41

Envoyé par hellspawn_ludo

Bonjour programaniac,

Je viens de tester ton code et le innerHTML a bel et bien effacé les 2 formulaires. Je vois donc les 2 phrases de la fonction.

Alors, où est le hic ??

pas chez moi... Avec FF2, le contenu du paragraphe 2 (Form2) s'ajoute bien au contenu déjà présent.

**Auteur** · 06/04/2008, 13h04

j'ai compris pourquoi. Pour cela mets une bordure sur ton P et regarde l'arborescence de ta page en utilisant l'inspecteur DOM de FF.

Code html :

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
 
 
<html>
<head>
<script type="text/javascript">
function changeForm()
{
        document.getElementById('Form1').innerHTML="Ici le formulaire change";
        document.getElementById('Form2').innerHTML="Ici le formulaire change PAS!!!";
}
</script>
</head>
<body>
 
<div id="Form1">
		<form>
			<input type="button" value="Formulaire 1" />
		</form>
</div>
 
<p id="Form2" style="border: 1px #000000 solid">
		contenu de P
		<form>
			<input type="button" value="Formulaire 2" />
		</form>
 
</p>
<input type="button" onClick="changeForm()">
</body>
</html>

Le form contenu dans p n'est pas encadré par la bordure noire. Seul le texte ("contenu de P") est encadré. En regardant l'arborescence de ta page, on constate que le second form n'est pas dans le p !!.

Ce qui explique que document.getElementById('Form2').innerHTML="Ici le formulaire change PAS!!!"; "ajoute" le texte sans remplacer le formulaire.

p ne peut pas contenir de balises de type block (p, form, div, table...).

**hellspawn_ludo** · 06/04/2008, 14h54

Auteur,

Au temps pour moi. Je n'avais pas essayé avec FF.

C'est tout de même chiant cette espèce de non compatibilité.

**FremyCompany** · 06/04/2008, 17h58

Essaie de mettre un <SPAN><DIV> avant ta FORM + refermer les balises à la fin

C'est tout aussi illégal mais peut-être que cela passera mieux (car le SPAN peut être dans le P, et que même si on peut théoriquement pas mettre de DIV dans un SPAN, ca a toujours marché, et qu'on peut bien évidemment mettre un FORM dans un DIV

Mais je n'ai pas testé.
Tiens moi au courrant si ca marche ou pas.

**Auteur** · 06/04/2008, 18h28

Envoyé par FremyCompany

Essaie de mettre un <SPAN><DIV> avant ta FORM + refermer les balises à la fin

C'est tout aussi illégal mais peut-être que cela passera mieux (car le SPAN peut être dans le P, et que même si on peut théoriquement pas mettre de DIV dans un SPAN, ca a toujours marché, et qu'on peut bien évidemment mettre un FORM dans un DIV

comme tu le sous-entends, avec cette méthode, sa page ne passe pas la validation W3C

Sur le site W3C il est bien précisé :
http://www.w3.org/TR/html401/struct/text.html#h-9.3

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

En plus :

We discourage authors from using empty P elements. User agents should ignore empty P elements.

**programaniac** · 06/04/2008, 19h53

haaaa ben merci les gars je comprenai vraiment pas pourquoi.

c'est super cool de votre part, mais ou je peux trouver ces règles de programmation genre p ne peut pas contenir ca, ca et ca!!! Parce que je suis sur un projet auquel je tiens a cœur et j'aimerais le faire du mieux que je peux pour qu'il soit développer dans les règles de l'art à tout niveau!!!!

encore merci les gars

**Auteur** · 06/04/2008, 22h51

Le site du W3C regroupe toutes les recommandations HTML.

www.w3.org

Sur ce même site tu pourras valider tes pages HTML.

**programaniac** · 07/04/2008, 10h57

merci chef, mais la tu m'envoie chercher l'aiguille dans la botte de fouin

moi ce que je cherchait c'était ça

Outil XHTML 1.1 Hiérarchie

m'aintenant que je l'ai trouvé chui bien

Merci quand meme les gars c'était super sympa de votre part

Apluche

**Auteur** · 07/04/2008, 12h59

Envoyé par programaniac

merci chef, mais la tu m'envoie chercher l'aiguille dans la botte de fouin

Il y a un moteur de recherche

**FremyCompany** · 07/04/2008, 17h55

Bah vous savez ce que dit l'HTML4 est totalement démodé.
Cela date de l'avant CSS tout cela.

Car un élément DIV peut ne pas être en display: block alors qu'un span pourrait l'être.

L'HTML4/XHTML1 est totalement dépassé par les évènements (plus de 10 ans en info, c'est un peu comme un siècle) et propose des règles totalements obsolètes.

De plus, aucun navigateur ne réchigne à afficher un élément BLOCK dans un élément P ou même dans un SPAN inline.

FORM est un peu l'exception qui confirme la règle (d'un autre coté, je vois mal l'intérêt qu'à la mise d'un FORM dans un P

)

[HTML] problème : innerHTML (bizarre)

HTML

Discussions similaires

Partager

Partager