Style CSS ne s'applique dans un InnerHTML

Version imprimable

Bonjour à tous,

Voilà j'ai une fonction qui est comme ça :
Code:

1 2 3 4 5 function update_menu(){ menu = document.getElementById("main-nav"); menuenplus = '<li class="write"><a href="#" title="Write">Write</a></li>'; menu.innerHTML += menuenplus; }
et qui permet de modifier le contenu d'un div.
L'élément s'ajoute bien dans mon div en question mais le style ne s'applique pas à celui-ci.

Est-ce un souci de DOM ? autre chose ? Souci JS ?

Merci de votre aide précieuse

Code:

1
2
3
4
5
6
7
8
9
10
11
function update_menu(){
        menu = document.getElementById("main-nav");
        menuenplus =document.createElement('li')
        menuplus.className="write"
        pluslink=document.createElement('a')
        pluslink.href="#" 
        pluslink.title="Write"
        pluslink.appendChild(document.createTextNode('Write');
        menuplus.appendChild(pluslink)
        menu.appendChild(menuplus);
     }

Citation:
Envoyé par SpaceFrog
Code:

1 2 3 4 5 6 7 8 9 10 11 function update_menu(){ menu = document.getElementById("main-nav"); menuenplus = document.createElement('li') menuplus.className="write" pluslink = document.createElement('a') pluslink.href="#" pluslink.title="Write" pluslink.appendChild(document.createTextNode('Write'); menuplus.appendChild(pluslink) menu.appendChild(menuplus); }
merci pour cette réponse
MAIS
du coup il ne se passe plus rien, plus aucun ajout dans mon div
J'ai ajouté les ; à la fin de chaque ligne
Et voici le HTML original que je souhaite ajouter
Code:

1 2 3 4 5 6 7 <li class="write"><a href="#" title="Write">Write</a> <ul> <li><a href='javascript:loadHTML("ajax-modal.html");' title="Articles">Articles</a></li> <li><a href='javascript:loadHTML("ajax-modal.html");' title="Add article">Add article</a></li> </ul> </li>
Donc si je comprends bien ce que tu me donnes correspond à la bonne pratique à utiliser pour ajouter des éléments versus le InnerHTML ?

menuplus est une nouvelle variable ou dois-je lire menuenplus ?
Sinon est-ce que je suis censé créer autant de variable que d'élements à créer ?

Merci à toi

15/01/2011, 16h53
dukej

Le faire en innerHTML est plus efficace en terme de performances. Mais j'aurai ajouté le LI plutot en DOM et le contenu du LI en innerHTML. Ensuite je fais un
monNaVBidule.appendChild(li).

Là ton problème il doit être ailleurs. Regarde bien avec firebug ce que tu obtiens en code généré, tu découvriras peut-être pourquoi ça déconne.

De plus montre nous ta CSS associé.

Désolé mais là on manque ENORMEMENT d'éléments pour pouvoir t'aider

Bon j'avance

avec cela, j'arrive à m'en sortir à epu près
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function update_menu(){ menu = document.getElementById("menu"); // creation du li menuenplus = document.createElement('li') ; menuenplus.className="write"; // creation du lien hypertexte pluslink=document.createElement('a') ; pluslink.href="#"; pluslink.title="Write" ; //pluslink.appendChild(document.createTextNode('Write'); //menuenplus.appendChild(pluslink) ; menu.appendChild(menuenplus); }
A peu près car la ligne pluslink.appendChild(document.createTextNode('Write'); fait que cela ne fonctionne plus !

@dukej : je croyais que c'était le contraire !!! pour ce qui des performances !
N'est-ce pas plus propre de le faire comme cela ???

ton ajout doit IMPERATIVEMENT être conforme pour ne pas avoir de surprise, dans ton cas la construction, l'enchaînement des balises, n'est pas valables.
On s'approcherait plutôt de cela
Code:

1 2 3 4 5 6 7 8 <ul class="write"> <li>Write <ul> <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Articles">Articles</a></li> <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Add article">Add article</a></li> </ul> </li> </ul>
quelques corrections au passage pour plus de propreté

Citation:

Envoyé par NoSmoking

ton ajout doit IMPERATIVEMENT être conforme pour ne pas avoir de surprise, dans ton cas la construction, l'enchaînement des balises, n'est pas valables.
On s'approcherait plutôt de cela

Code:

1
2
3
4
5
6
7
8
<ul class="write">
  <li>Write
    <ul>
      <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Articles">Articles</a></li>
      <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Add article">Add article</a></li>
    </ul>
  </li>
</ul>

quelques corrections au passage pour plus de propreté

Je ne saisi pas très bien ce que tu essayes de me dire :oops:
mais voici tout le html de la zone en question et il me semble qu'il est correct, non ?

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
 <!-- Main nav -->
	<nav id="main-nav">
		<ul class="container_12" id="menu">
			<li class="home current"><a href='javascript:loadHTML("ajax-tab.html");' title="Accueil">Accueil</a>
				<ul>
					<li class="current"><a href="#" title="Dashboard">Tableau</a></li>
					<li><a href="#" onclick="loadHTML('monprofil.php');">MON PROFIL</a></li>
				</ul>
			</li>
			<li class="write"><a href="#" title="Write">Write</a>
				<ul>
					<li><a href='javascript:loadHTML("ajax-modal.html");' title="Articles">Articles</a></li>
					<li><a href='javascript:loadHTML("ajax-modal.html");' title="Add article">Add article</a></li>
				</ul>
			</li>
            <li class="comments"><a href="#" title="Comments">Comments</a>
				<ul>
					<li><a href="#" title="Manage">Manage</a></li>
					<li><a href="#" title="Spams">Spams</a></li>
				</ul>
			</li>
			<li class="medias"><a href="#" title="Medias">Medias</a>
				<ul>
					<li><a href="#" title="Browse">Browse</a></li>
					<li><a href="#" title="Add file">Add file</a></li>
				</ul>
			</li>
			<li class="users"><a href="#" title="Users">Users</a>
				<ul>
					<li><a href='javascript:loadHTML("films.php");' title="Browse">List</a></li>
					<li><a href="#" title="Add user">Add user</a></li>
					<li><a href="#" title="Settings">Settings</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	<!-- End main nav -->

Et moi j'essaye donc sur ce modèle, d'ajouter dynamiquement ce menu dans ma page.

15/01/2011, 18h12
NoSmoking

- Effectivement c'est correct, il manquait juste une partie pour être sûr...
- En suivant bien l'ordre de création il ne devrait pas y avoir de problème donc.
- Cela me paraît un peu lourd à intégrer, à moins de créer une sous fonction, pourquoi ne pas le mettre en dur directement.

Citation:

Envoyé par NoSmoking

- Effectivement c'est correct, il manquait juste une partie pour être sûr...
- En suivant bien l'ordre de création il ne devrait pas y avoir de problème donc.
- Cela me paraît un peu lourd à intégrer, à moins de créer une sous fonction, pourquoi ne pas le mettre en dur directement.

Le contexte est le suivant :
Je souhaite en fonction d'un profil connecté faire en sorte que le menu s'adapte en terme de contenu.
je ne vois pas comment faire autrement pour le moment...

Par contre je n'arrive toujours pas à arriver à mes fins.

si je veux intégrer tout ce qui suit :
Code:

1 2 3 4 5 6 7 <li class="write"><a href="#" title="Write">Write</a> <ul> <li><a href='javascript:loadHTML("ajax-modal.html");' title="Articles">Articles</a></li> <li><a href='javascript:loadHTML("ajax-modal.html");' title="Add article">Add article</a></li> </ul> </li>
quel devrait être le code js ?
Moi j'en suis là mais bof bof niveau résultat
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function update_menu(){ // je repère l'élément dans lequel se fera l'ajout menu = document.getElementById("menu"); // je créé un élément de type <li> menuenplus = document.createElement('li'); menuenplus.className="users"; // je créé un élément de type <a> avec ses paramêtres href et title et lien pluslink = document.createElement('a'); pluslink.setAttribute('href','javascript:loadHTML("ajax-tab.html");'); pluslink.setAttribute('title','infobulle'); pluslink.appendChild(document.createTextNode('Write')); menu.appendChild(menuenplus); ul = document.createElement('ul'); ulli1 = document.createElement('li'); ulli2 = document.createElement('li'); ul.appendChild(ulli1); ul.appendChild(ulli2); menu.appendChild(ul); }

Citation:

quel devrait être le code js ?

voila à quoi cela pourrait ressembler

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
66
67
function update_menu() {
    // recup conteneur
    var oParent = document.getElementById("menu");
    // creation LI
    var oLI = document.createElement('li');
    // affectation de la classe
    oLI.className = "write";
        // creation de A
        var oA_LI = document.createElement('a');
        // affecte attribut
        oA_LI.href = '#';
        oA_LI.title = 'Write';
        // creation text
        var oTxt = document.createTextNode('Write');
        // ajout text
        oA_LI.appendChild( oTxt);
        // ajout A
        oLI.appendChild( oA_LI);
        // creation UL
        var oUL_LI = document.createElement('ul');
            // creation LI
            var oLI_UL = document.createElement('li');
                // creation A
                oA_LI = document.createElement('a');
                // affecte attribut
                oA_LI.setAttribute( 'href', '#');
                oA_LI.setAttribute( 'title', 'Articles');
                // la fonction sur le click
                oA_LI.onclick = function(){
                    loadHTML("ajax-modal.html");
                    return( false);
                }
                // creation text
                oTxt = document.createTextNode('Articles');
                // ajout text -> A
                oA_LI.appendChild( oTxt);
                // ajout A -> LI
                oLI_UL.appendChild( oA_LI);
            // ajout LI -> UL
            oUL_LI.appendChild( oLI_UL);
 
            // creation LI
            oLI_UL = document.createElement('li');
                // creation A
                oA_LI = document.createElement('a');
                // affecte attribut
                oA_LI.setAttribute( 'href', '#');
                oA_LI.setAttribute( 'title', 'Add Article');
                // la fonction sur le click
                oA_LI.onclick = function(){
                    loadHTML("ajax-modal.html");
                    return( false);
                }
                // creation text
                oTxt = document.createTextNode('Add article');
                // ajout text -> A
                oA_LI.appendChild( oTxt);
                // ajout A -> LI
                oLI_UL.appendChild( oA_LI);
            // ajout LI -> UL
            oUL_LI.appendChild( oLI_UL);
 
        // ajout UL -> LI
        oLI.appendChild( oUL_LI);
    // ajout LI -> Parent
    oParent.appendChild( oLI);
}

c'est peu être simplifiable mais c'est pour te montrer la rigueur qu'il faut avoir dans ce genre de construction.

Tout cela pour faire

Code:

1
2
3
4
5
6
7
8
<ul id="menu">
  <li class="write"><a title="Write" href="#">Write</a>
    <ul>
      <li><a title="Articles" href="#">Articles</a></li>
      <li><a title="Add Article" href="#">Add article</a></li>
    </ul>
  </li>
</ul>

il faut avouer que c'est plus long, mais si besoin exige.

Dans l'exemple les fonctions sont appelées sur le onclick et non sur le href ce qui fait qu'elles n'apparaissent pas dans le code final

(*) merci de m'excuser si il y a des coquilles dans les commentaires

15/01/2011, 21h15
iviewclear

Merci NoSmoking

c'est peut être long mais c'est lisible et très compréhensible
Je regarde cela et te tiens au courant

dans tous les cas je te remercie de ton implication pour m'aider dans mon apprentissage

Ceci dit, jusqu'à maintenant je ne m'étais pas servi de JS pour manipuler les éléments de ma page

On en apprends tous les jours

merci encore
je vais essayer ça
15/01/2011, 22h58
iviewclear

Alors il y a du mieux car mon élément de menu réagit quand je passe la souris dessus.
Mais c'est tout !!:cry::cry::cry:

Je pense qu'il doit y avoir autre chose avec javascript qui cloche car du coup je ne vois pas ce qui pourrait se passer (ceci dit quand je dis ça je ne crois pas à mes chances d'en être totalement sur non plus :lol::lol::lol:)

Voici la page à partir de laquelle je travaille et qui reprend exactement le menu du haut. c'est un template donc.

http://www.display-inline.fr/demo/co...late/forms.php

cela montre exactement le rendu ainsi que le fonctionnement
Je pense que cela peut aider sur ce qui reste à faire

Avec mes maigres connaissances je penche pour un souci js, peut être ou alors de CSS car c'est vrai qu'il y a des choses bizarres dedans, mais dans le même temps cela marche bien dans l'original, alors ben oui je suis perdu...

Merci de ton aide qui me fait malgré tout beaucoup avancer
16/01/2011, 14h49
NoSmoking
Citation:

Alors il y a du mieux car mon élément de menu réagit quand je passe la souris dessus.
Mais c'est tout !!

qu'attend tu de plus, que la fonction se déclenche sur le click.
As tu mis l'action sur le onclick des liens comme indiqué?
Code:

1 2 3 4 5 // la fonction sur le click oA_LI.onclick = function () { loadHTML("ajax-modal.html"); return (false); }
16/01/2011, 19h05
iviewclear
Citation:
Envoyé par NoSmoking

qu'attend tu de plus, que la fonction se déclenche sur le click.
As tu mis l'action sur le onclick des liens comme indiqué?

Code:

1 2 3 4 5 // la fonction sur le click oA_LI.onclick = function () { loadHTML("ajax-modal.html"); return (false); }
Normalement le fonctionnement quand on clique sur le menu c'est qur cela fait apparaitre les items dans un sous menu
Je t'ai mis une page en exemple justement pour que tu te fasses une idée du fonctionnement
Pour le lien oui j'ai su faire
16/01/2011, 22h15
NoSmoking

quand on clique sur Write, on a bien les sous menus
Articles | Add article | Posts | Add post
qui apparaissent!
16/01/2011, 22h45
iviewclear

Citation:

Envoyé par NoSmoking

quand on clique sur Write, on a bien les sous menus
Articles | Add article | Posts | Add post
qui apparaissent!

Tu l'as testé de ton côté ?
parce que chez moi...euh rien n'apparaît après le clic
j'ai cherché le pourquoi sans trouver encore le pourquoi
Désolé....
je continue à chercher
Merci

Edit : d'ailleurs j'ai une question : je suppose qu'il est normal de ne pas voir dans le code source les lignes ajoutées ?
16/01/2011, 23h02
NoSmoking

j'ai testé à partir du lien que tu as fourni, sur les principaux navigateurs.
16/01/2011, 23h14
iviewclear

Citation:

Envoyé par NoSmoking

j'ai testé à partir du lien que tu as fourni, sur les principaux navigateurs.

Ah ben oui j'ai du très mal l'expliquer alors
Car là c'est le template dont je me sers
Donc tu regardes le site commercial
Et pas ce que tu penses que j'ai mis en ligne :ccool::ccool::ccool:
17/01/2011, 18h28
NoSmoking

Citation:

Et pas ce que tu penses que j'ai mis en ligne

tu as le lien de ce que tu as mis en ligne?
18/01/2011, 23h45
iviewclear

Citation:

Envoyé par NoSmoking

tu as le lien de ce que tu as mis en ligne?

Non je n'ai pas mis en ligne
je regarde pour le faire
merci