javascript - 如何使用 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')
;