Discussion :

[gabrielS]

Bonjour,

J'ai un petit soucis de CSS je suppose : j'ai une liste <ul> compos� de plusieurs <li>.

Au d�part, ma liste ressemble � ceci :

Code html :

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

1
2
3
<ul id="sideFeatures" style="height:350px; overflow-x:hidden; overflow-y:scroll;">
    <li class="draggableItem" draggable="true" idfeature="17">Item 1 </li>
</ul>

Puis, depuis JavaScript, j'ajoute des <li> dans ma liste, comme ceci :

Code javascript :

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
17
function completeListSlideTab(dico, container /* ul */){
    var doctype = document.implementation.createDocumentType('xml', '', '');
    var domxml = document.implementation.createDocument('', 'xml', doctype);
    var i = 0;
    var currentLi = undefined;
    for (i = 0; i < dico.features.length; i++){
        currentLi = domxml.createElement("li");
        currentLi.setAttribute("class", "draggableItem");
        // same thing as above.. currentLi.className = "draggableItem";
        currentLi.setAttribute("draggable", "true");        
        currentLi.setAttribute("idFeature", dico.features[i].id);
        // currentLi.setAttribute("id", "li" + i);
        currentLi.textContent = dico.features[i].name;
        container.appendChild(currentLi.cloneNode(true));
        //<li class="draggableItem" draggable="true">Item 1
    }
}

Cette fonction est appel�e depuis mon HTML, et j'obtiens bien un <ul> avec plusieurs <li> (comme souhait�).
Cependant, le style CSS n'est pas appliqu� � mes <li> tout juste cr��s en JavaScript. Je me retrouve donc avec une <li> (celle cr��e depuis le HTML) avec un beau style, et les autres sans style du tout..

(voila le code que j'obtiens pour mon �l�ment <ul> :

Code html :

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

1
2
3
4
5
6
7
8
<ul id="sideFeatures" style="height:350px; overflow-x:hidden; overflow-y:scroll;">
  <li class="draggableItem" draggable="true" idfeature="17">Item 1 </li>
  <li class="draggableItem" draggable="true" idFeature="idCF1" id="li0">CF1</li>
  <li class="draggableItem" draggable="true" idFeature="idCF2" id="li1">CF2</li>
  <li class="draggableItem" draggable="true" idFeature="idCF3" id="li2">CF3</li>
  <li class="draggableItem" draggable="true" idFeature="idCF4" id="li3">CF4</li>
  <li class="draggableItem" draggable="true" idFeature="idCF5" id="li4">CF5</li>
</ul>

Je ne comprends pas pk le style n'est pas appliqu� aux autres <li> ... Si qqun a une id�e, je suis grandement preneur

Bonnes f�tes de fin d'ann�e � tous, et merci d'avance pour votre aide,

G.S

[Bovino]

Mais c'est pas du tout comme �a qu'on ajoute des �l�ments dans une page !

Il ne faut absolument pas cr�er un nouveau document avec un nouveau doctype, il suffit de cr�er les �l�ments de liste (createElement()) puis de les ins�rer dans le document actuel (appendChild()).

[gabrielS]

�a fonctionne � merveille !! .. Ma question serait maintenant de savoir � quoi sert le

Code :

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

1
2
  var doctype = document.implementation.createDocumentType('xml', '', '');
    var domxml = document.implementation.createDocument('', 'xml', doctype);

J'avais trouv� �a sur un forum qqe part et j'avais utilis� ces lignes l�, sans doute � mauvais escient..

Merci beaucoup Bovino !

[Bovino]

Comme je te l'ai dit, �a sert � cr�er un nouveau document (avec son doctype), or une page HTML correspond � un unique document (si on ne prend pas en compte les cadres int�gr�s ou iframe).
Ces m�thodes servent essentiellement au DOM XML, donc � cr�er des documents XML. En Web, on ne s'en sert que rarement (pour ma part, je ne les ai jamais utilis�es).