如何使用 <li> JavaScript 动态创建？

Question

请检查以下JavaScript代码

<script>
            function dynamicMessageLoader(id) {
                $.get("SentMessagesDynamicLoaderServlet?idMessageGroup=" + id, function (responseJson) {
                    $('#li_list').empty();
                    var array = [];
                    $.each(responseJson, function (index, item)
                    {
                        array[index] = item;
                    });
                    $('#message_count').empty();
                    var readArray = array.length;
                    var count = readArray + " Messages Selected";
                    $('<p />', {html: count}).appendTo('#message_count');
                    for (var i = 0; i < readArray; i++) {
                        $('<li />', {html: array[i][0]}).appendTo('#li_list');
                    }
                });
            }
  </script>

然后一些HTML

<ul id="li_list"></ul>

在我的JavaScript代码中，请考虑本节 -

 `$('<li />', {html: array[i][0]}).appendTo('#li_list');`

我想要的不只是创建一个<li>，而是其剩余属性，就像以下

一样

<li class='clickable-row hand' id="3" >Text here</li>

在我的数组中，array[i][0]包含ID，array[i][1]包含文本。我该如何实现？

Answer 1

它将是 $('<li>', {html: array[i][1], 'class': 'clickable-row hand', id: array[i][0]})

请注意，属性可能没有引号，除了保留单词的class。

---

替代

var li = $('<li>');
li
    .addClass('clickable-row hand')
    .text(array[i][1])
    .attr('id', array[i][0])
    .appendTo('#li_list')
;

Answer 2

您处在正确的路径上，

$('<li />', {
     "id": array[i][0], 
     "text" : array[i][1],
     "class" : 'clickable-row hand'
}).appendTo('#li_list');

或创建一个对象，然后使用各种方法来操纵元素。

var li = $('<li />');
li.attr("id", array[i][0]);
li.text(array[i][1]);
li.addClass("id", 'clickable-row hand');
li.appendTo('#li_list')

Answer 3

您可以尝试这样。创建Li并添加attr＆amp;发短信，并将Li附加到#li_list

for (var i = 0; i < readArray; i++) {
     var li = $('<li/>')
            .attr('id', array[i][0])
            .text(array[i][1]);
            .addClass('clickable-row hand');
     $("#li_list").append(li);
}