CSS non prise en compte avec un innerHTML

**Thewil** · 11/05/2009, 14h51

Bonjour � tous,

J'ai un fichier js qui me cr�er un arbre en fonction d'un fichier JSON et qui me retourne le r�sultat de cet arbre sous forme html, de ce style.

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
<ul id="arbre" class="filetree treeview-black">
	     <li>Couches
	        <ul>
		   <li>
		       <span>Fond de plan</span>
			<ul>
			    <li>franceRaster</li>
			</ul>
		   </li>
		   <li>
		     <span>Cours d'eau</span>
		        <ul>
			    <li>Cours d'eau</li>
			</ul>
		   </li>.....

Mon fichier js renvoie le r�sultat de cette fa�on la :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
function initJson(){
 
	$.getJSON("../js/couchesJSON.json", function(json){
		strMakeTree = makeTree(json);
		//Ciblage du paragraphe
		var treeNode = document.getElementById("tree");
		if (treeNode) {
			treeNode.innerHTML = strMakeTree;
		}
	});	
 
}

Et de l'autre cot� j'ai une page jsp avec un div qui a id="tree".

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
	<div id="tree" class="content" style="overflow: auto; height: 179px;">
 
	</div>

Mais le soucis c'est que mon code css n'est pas appliqu� � mon arbre alors que si je colle le r�sultat html que me renvoie mon js en dur directement dans la jsp mon arbre s'affiche correctement.

Merci de votre aide

**franculo_caoulene** · 11/05/2009, 15h16

Salut,

L'application d'une r�gle CSS � un innerHTML fonctionne :

Code xhtml :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <title>classe CSS dans un innerHTML</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      .contenu {background:#f00;}
    </style>
</head>
<body>
  <div id="conteneur"></div>
    <script type="text/javascript">
      document.getElementById("conteneur").innerHTML = "<span class=\"contenu\">blah</span>";
    </script>
</body>
</html>

Tu utilises un framework, quel est-il? La source html g�n�r�e est-elle correcte? Quel est le r�sultat final obtenu?

**Thewil** · 11/05/2009, 16h06

Je m'en suis rendu compte apr�s. En fait il faut mettre directement les class dans le html g�n�r� je sais pas pourquoi je m'�tais dit que le css s'appliquerai directement sur le html g�n�r� par le fichier javascript

**Thewil** · 12/05/2009, 09h11

Bon en fait un autre petit soucis vient � moi

Car en fait je g�n�re un arbre comme dans cette exemple http://docs.jquery.com/Plugins/Treeview

Du coup le probl�me en mettant mes class CSS dans ce que g�n�re mon fichier js c'est que je n'ai plus aucune action lorsque je clique sur les n�uds de l'arbre.

Auriez vous une id�e ?

Merci

CSS non prise en compte avec un innerHTML

JavaScript

Discussions similaires

Partager

Partager