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

**OAOAO** · 26/12/2009, 19h37

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 :

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
<!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>

**danielhagnoul** · 26/12/2009, 23h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**OAOAO** · 27/12/2009, 02h29

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...

<!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>

**danielhagnoul** · 27/12/2009, 10h14

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 :

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
<!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 :

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
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>

**OAOAO** · 27/12/2009, 23h48

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 :

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
<!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.

**danielhagnoul** · 28/12/2009, 00h55

Bonsoir.

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

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

jQuery

Discussions similaires

Partager

Partager