How to dynamically create <li> with JavaScript?

Question

Please check the below JavaScript code

<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>

Then some HTML

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

In my JavaScript code, consider this section -

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

What I want is not to just create a <li> but with its remaining attributes, exactly like below

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

In my array, array[i][0] contains the ID and array[i][1] contains a text. How can I achieve this?

And the problem is? Create the li, add the classes (.addClass()), add the id (.attr()), add the text (.text()/.html()) and append to the list (.appendTo()) — Andreas
– Andreas, Commented Jun 27, 2017 at 5:46

Justinas · Accepted Answer · 2017-06-27 05:47:32Z

3

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

Please note, that attributes may be without quotes, except class that is reserved word.

Alternative

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

answered Jun 27, 2017 at 5:47

Justinas

43.9k5 gold badges72 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2017-06-27 05:51:31Z

2

You were on correct path,

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

OR, Create a object then use various method to manipulate element.

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

edited Jun 27, 2017 at 5:51

answered Jun 27, 2017 at 5:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Dinesh undefined · Accepted Answer · 2017-06-27 05:46:54Z

0

You could try like this. create li and add attr & text to it and append that li to #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);

}

answered Jun 27, 2017 at 5:46

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

1 Comment

PeakGen Over a year ago

Thank you for the reply :) +1 from me

Collectives™ on Stack Overflow

How to dynamically create <li> with JavaScript?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related