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

Vue hybride

Discussions similaires

Partager

Partager