Создать список с помощью метода JQuery append ()?

Я хочу создать легенду для Pie-Chart. Я использую список для создания легенд. Я создаю список динамически с помощью ajax-запроса и используя JQuery.append() для создания списка.

Моя часть HTML:

<ul class='tab' id='list1'></ul>

Моя часть CSS:

.color {
width: 20px;
height: 14px;
display: inline-block;
}
.tab, .tab li {
margin: 6px;
padding: 0;
}
.tab {
list-style: none outside none;
width: auto;
height: 230px;
overflow-x: auto;
overflow-y: auto;
margin-top: 30px;
}
.tab li {
border: solid 1px;
font-size: 11px;
margin-bottom: 10px;
float: left;
text-align: left;
font-weight: normal;
display: inline;
height: 14px;
/*width: 600px;*/
background: none!important;
}

Часть моего скрипта:

$(document).ready(function () {
var a = "10";
for (var i = 0; i < 30; i++) {

    var color = $('<span>').addClass('color').css({
        backgroundColor: '#123AAB'
    });
    var ul = $('#list1').append($('<li></li>').append($('<ul></ul>')));
    ul.append($('<li>').append(color));
    ul.append($('<li>09</li>'));
    ul.append($('<li>jkhjkhjkfhjksfhdfjkdfhjdfsjkhjkfhjfksdhj</li>'));
}
});

JSFiddle ссылка:

JSFiddle

Я хочу, чтобы мой список:

<ul>
   <li>
      <ul>
         <li>List1</li>
         <li>List1</li>
         <li>List1</li>
      </ul>
      .
      .
      .
      and so on...
  </li>
</ul>