为什么水平列表项对正不适用于动态添加的项

我正在创建一个div网格，我决定使用一个无序列表作为容器，这样我就可以利用水平对齐将包含div的列表项的优势。问题是，只有在页面加载之前编写的HTML才能使用正当性。如果我尝试使用Javascript动态创建和添加列表项，则说明理由失败。

这个fiddle演示了两个无序列表的问题，其中一个是静态填充的（成功），另一个是动态填充的（失败）。

这是代码：

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;
}