Impossible de changer le style depuis JavaScript

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:

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:

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:

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> 8O8O... 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

Mais c'est pas du tout comme ça qu'on ajoute des éléments dans une page ! 8O

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()).

ça fonctionne à merveille !! :D.. Ma question serait maintenant de savoir à quoi sert le
Code:

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 !

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