append("<p>..") dans html marche, mais pas xhtml

Version imprimable

Bonjour. J'ai un problème avec ce code, qui fonctionne sur un fichier nommé X.html, mais pas si l'on nomme son fichier X.xhtml.

J'ai le même problème sous Firefox et sur Chrome.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>	Super app de la mort qui tue !	</title> 
    <script src="jquery.js" type="text/javascript"></script>
 
    <script langage="javascript" >
        $(function () {
            $("div").click(function () {
                $(this).append("<p>test!!   </p>"); return false;
            });
        });
    </script>
</head>
 
<body>
    <div>
        <p>Ceci est un div</p>
    </div>
</body>
</html>

Bonsoir.

Lorsque vous sauvegardez votre fichier avec l'extension ".xhml", les navigateurs traitent votre fichier comme du XML. Il faut alors obligatoirement mettre le code JS dans un fichier externe, sinon vous devez utiliser CDATA.
Code:

1 2 3 4 5 6 7 8 9 10 11 <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){ $("#conteneur").click(function(){ $(this).append("<p>test!! </p>"); return false; }); }); //]]> </script>

27/12/2009, 02h29
OAOAO

Merci beaucoup, du coup celà fonctionne :)

Par contre je n'arrive pas à ajouter un style css dynamiquement avec $("head").append('<style type="text/css">.....');

Firebug le voit bien dans le code html mais il n'utilise pas le style...

Citation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title> Super app de la mort qui tue ! </title>
<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("head").append('<style type="text/css">div {background: blue}</style>');
});
//]]>
</script>
</head>

<body>
<div>
<p>Ceci est un div</p>
</div>
</body>
</html>

Bonjour.

Je ne vois pas de problème, la C.S.S. est présente et utilisée dans les deux cas.

fichier efface111.xhtml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Super app de la mort qui tue !</title>
	<script type="text/javascript" src="../lib/jquery-1.4a2.min.js"></script>
    <script type="text/javascript">
    //<![CDATA[
        $(document).ready(function(){
            $("head").append('<style type="text/css">div {background-color: blue;}</style>'); 
        });
    //]]>
    </script>
</head>
<body>
    <div>
        <p>Ceci est un div</p>
    </div>
</body>
</html>

fichier efface11.xhtml (dans Firebug il y a deux fichiers styles portant le même nom) :

Code:

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style type="text/css">
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:Arial, Helvetica, sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:"Times New Roman", Times, serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}
 
		/* TEST */
	</style>
	<script type="text/javascript" src="../lib/jquery-1.4a2.min.js"></script>
	<script type="text/javascript">
	//<![CDATA[
		$(document).ready(function(){
			$("head").append('<style type="text/css">div.classBleu {background-color:blue;}</style>'); 
		});
	//]]>
	</script>	
</head>
<body>
	<div id="conteneur">
		<div class="classBleu">
			<p>Ceci est un div</p>
		</div>
		<div id="affiche"></div>
	</div>
</body>  
</html>

Je ne comprend pas, ça ne fonctionne pas chez moi, ni sur Firefox 3.6b5 ni sur la version 3.0 ni sur Chrome...

Fichier test.xhtml:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>	Super app de la mort qui tue !	</title> 
    <script src="jquery.js" type="text/javascript"></script>
 
	<script type="text/javascript">
	//<![CDATA[
$(document).ready(
function(){ $("head").append('<style type="text/css">div {background-color: blue;}</style>');     
	});
	//]]>
	</script>
</head>
 
<body>
    <div>
        <p>Ceci est un div</p>
    </div>
</body>
</html>

Par contre cela fonctionne si on le nomme test.html.

28/12/2009, 00h55
danielhagnoul

Bonsoir.

Je viens de tester le code de votre dernier message et cela fonctionne en « . xhtml » et en html.