Discussion :

[iviewclear]

Bonjour à tous,

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

Code :

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

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

[SpaceFrog]

Code :

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

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

[iviewclear]

Code :

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

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 :

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

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

[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

[iviewclear]

Bon j'avance

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

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

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

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

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é