Pourquoi la justification horizontale des éléments de liste ne fonctionne-t-elle pas avec les éléments ajoutés dynamiquement ?

Question

Je suis en train de créer une grille de divs, et j'ai décidé d'utiliser une liste non ordonnée comme conteneur, afin de pouvoir profiter de la justification horizontale des éléments de la liste qui contiendront les divs. Le problème est que la justification ne fonctionne qu'avec le HTML écrit avant le chargement de la page. Si j'essaie de créer et d'ajouter les éléments de la liste de façon dynamique avec Javascript, la justification échoue.

Ce site violon démontre le problème avec deux listes non ordonnées, où l'une est remplie statiquement (réussit) et l'autre dynamiquement (échoue).

Voici le code :

HTML

<ul>
    <li><div></div></li>
    <li><div></div></li>
    <li><div></div></li>
</ul>

<ul id="list"></ul>  

Javascript

var list = document.getElementById("list");
for (var i=0; i<3; i++) {
    var li = document.createElement("li");
    var div = document.createElement("div");
    li.appendChild(div);
    list.appendChild(li);  
}  

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: justify;
}
ul:after {
    content: "";
    width: 100%;
    display: inline-block;
}
li {
    display: inline;
}
div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background: #4391EE;
    border: 1px solid black;
}

Answer 1

La principale différence entre la version statique et la version dynamique est que la version statique comporte des espaces entre chaque élément.

Pour corriger la version dynamique, vous devez également ajouter des espaces :

list.appendChild(document.createTextNode(" "));

Voici une démo : http://jsfiddle.net/thirtydot/kQNNe/1/