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