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');

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

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_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);

}

function submit() {  
    if($rootScope.name!=null)    {

        var temp={
            "name":$rootScope.name,
            "surname":$rootScope.surname,
            "email":$rootScope.email
        }
        localStorage.setItem('user_data',JSON.stringify(temp)); 
        // Stores temp to localStorage          
         var data = localStorage.getItem('user_data');
         // reads data from localStorage
                        vat $scope.tempData = JSON.parse(data);
                        console.log($scope.tempData);
                        // prints data retrived from localStorage and pass this tempData in html to use in html                         

        }
    }

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

3 个答案: