Create ul and li elements in javascript.
<p>I am trying to create ul and li element in my codes by using javascript. I have following:</p>

<pre><code>var test=document.createElement('section');
test.setAttribute('id','test');

var ul=document.createElement('ul');


document.body.appendChild(test);
test.appendChild(ul);

for (var i=0; i&lt;array.length; i++){

    var li=document.createElement('li');

    ul.appendChild(li);
    li.innerHTML=li.innerHTML + array[i];

}
</code></pre>

<p>My array is parsed using json_encode from php</p>

<pre><code>array[0]='aaa';
array[1]='bbb';
array[2]='ccc';
</code></pre>

<p>CSS</p>

<pre><code>section { 

    display: block;
    width: 200px;
    margin: 50px auto;
    border: 3px solid red;

}
</code></pre>

<p>Everything works fine except the list style dot is outside of my section tag. </p>

<p>It displays like this in Chrome and IE but firefox work fine.</p>

<pre><code> -------------
*| aaa       |
*| bbb       |
*| ccc       |
 -------------
</code></pre>

<p>I want my dot inside my section tag. Anyone idea? Thanks a lot.</p>
