Style CSS ne s'applique pas dans un InnerHTML

Bonjour à tous,

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

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

Yop !

Tu ne nous en donne pas assez...
A première vue, ta fonction JavaScript semble tout à fait correcte.
Est ce que tu as bien déclaré ton style "write" dans ton CSS?

The_Moye a écrit :
Yop !

Tu ne nous en donne pas assez...
A première vue, ta fonction JavaScript semble tout à fait correcte.
Est ce que tu as bien déclaré ton style "write" dans ton CSS?

Tu n'en veux, n'en voilà

Alors pour répondre à ta question Oui oui car par ailleurs il s'applique bien

Mais j'ai lu qu'il valait mieux utiliser ce genre de syntaxe

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);
     }

Voici le contenu du CSS

nav > ul > li.write, nav > ul > li.write > a { background-image: url(../images/icons/write_2states.png); }

Merci
Modifié par iviewclear (15 Jan 2011 - 16:13)

Oui, avec ta nouvelle syntaxe, les éléments sont directement ajouté au DOM.
Mais pour avoir testé ton InnerHTML (copié / collé de ta fonction), ça marche très bien.

Un soucis avec ton image peut-être?

A quoi servent les '>' dans "nav > ul > li.write" ?

The_Moye a écrit :
Oui, avec ta nouvelle syntaxe, les éléments sont directement ajouté au DOM.
Mais pour avoir testé ton InnerHTML (copié / collé de ta fonction), ça marche très bien.

Un soucis avec ton image peut-être?

A quoi servent les '>' dans "nav > ul > li.write" ?

Bon je viens de me rendre compte que j'insère un <li> directement dans mon menu = document.getElementById("main-nav"); ce qui n'est pas très cohérent niveau HTML car du coup il n'y a pas de <ul> au dessus

Après pour ta question sur le CSS, j'en sais rien encore car je l'ai récupérer sur le net et je voulais m'y pencher ensuite

Je me rends compte que ce système est trop lourd alors voici ma question :

quel autre moyen en fonction d'un type de profil connecté pour afficher ou non des éléments de menu ?

Contexte : je souhaite identifier l'utilisateur et notamment son profil et en fonction de ce dernier décider d'afficher ou non certains éléments de mon menu ?

Y a t-il un autre moyen plus simple sur lequel je me pencherai ?

Merci

Bonjour,
bon j'ai terminé ma fonction qui donne du coup ceci :

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);
}

Bon j'obtiens en partie ce que je veux mais avec encore 1 petit souci
mais ceci fera l'objet d'un autre message

merci