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