Javascript 是否使用JQuery append（）方法创建列表？

我想为饼图创建图例。我正在使用列表创建图例。 我使用ajax请求动态创建列表，并使用

JQuery.append（）

创建列表

我的HTML部分是：

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

我的脚本部分是：

$(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>'));
}
});

$（文档）.ready（函数（）{
var a=“10”；
对于（变量i=0；i<30；i++）{
var color=$（''）.addClass（'color'）.css({
背景颜色：“#123AAB”
});
变量ul=$（'list1'）。追加（$（'li>'）。追加（$（'ul>'））；
ul.append（$（“
”）.append（color））；
ul.追加（$）；
追加（$（'
jkhjkfhjksfhhdfjkdfhjdfsfjkhjkfkfksdhj
）；
}
});

JSIDLE链接：

我希望我的清单如下：

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

清单1
清单1
清单1

.
.
.
等等

您为每个图例点添加了

li

3次。。。 试试看：

$(document).ready(function () {
    var a = "10";
    for (var i = 0; i < 30; i++) {
        $('#list1').append($('<li><span class="pieshare"></span>' + a + ' Hellooooooooooo</li>', {
            'style': "width: 100px;"
        }));
    }
});

---

我希望它使用3里，而不是只有1小时！我懂了。。。然后，您只需添加

ul

eah时间。。。有什么问题吗？

$(document).ready(function () {
    var a = "10";
    for (var i = 0; i < 30; i++) {
        $('#list1').append($('<li><span class="pieshare"></span>' + a + ' Hellooooooooooo</li>', {
            'style': "width: 100px;"
        }));
    }
});

.pieshare{
    display: inline-block;
    width:20px;
    height:20px;
    background-color:#987654;
}