Create list items in javascript

Question

I am working on cordova app .I want to create list items using jquery . here is my html code :

 <div class="body" id="list">
        <ul class="list list-messages" id="list">


        </ul>
      </div>

And this is my js code :

    <script>
        $(document).ready(function () {
            $(".navbar-title").html(localStorage.getItem("Provider"));

        $.ajax({
            type: 'Get',
            url: 'http://41.128.183.109:9090/api/data/getalllocations',
            success: function (data) {

            for (var i = 0; i < 11; i++) {

$("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');

                }

            }
        });
        });
    </script>

Its not working . please advice

innerHtml is a javascript property. and it gives html value and you can set html value. But for pushing html you can use append of jQuery — Parth Trivedi
– Parth Trivedi, Commented Jan 21, 2016 at 11:31

Sylvain · Accepted Answer · 2016-01-21 11:26:44Z

3

You should use .append() instead of .html()

.html() is replacing the content of your div, .append() will add some content

for (var i = 0; i < 11; i++) {
    $("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');
}

answered Jan 21, 2016 at 11:26

Sylvain

3,8731 gold badge30 silver badges32 bronze badges

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

2 Comments

prime Over a year ago

yes it solved but what is the different between html and innerhtml and append ? thank you

Sylvain Over a year ago

.html() is a jQuery method, it sets the HTML of your div ; .innerHTML is a vanilla javascript property, you can set its value with item.innerHTML = 'xxx' ; .append() is a jQuery method, it will add some content to you div

Parth Trivedi · Accepted Answer · 2016-01-21 11:43:12Z

1

You should append() not html()

Html() replaces value and append() inserting value.

 $(document).ready(function () {

                $("#list").empty();
                for (var i = 0; i < 11; i++) {
                    $("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');

                }    
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body" id="list">
        <ul class="list list-messages" id="list">


        </ul>
      </div>

edited Jan 21, 2016 at 11:43

answered Jan 21, 2016 at 11:26

Parth Trivedi

3,8321 gold badge23 silver badges41 bronze badges

4 Comments

Parth Trivedi Over a year ago

innerHtml is a javascript property. and it gives html value and you can set html value. But for pushing html you can use append of jQuery

Parth Trivedi Over a year ago

yes checked. as you have make answer of other person but check to do $("#list").empty(); before append. Ex. If your ajax return 0 data then you need to .empty() on success first. On html it should have zero li not previous list items

Parth Trivedi Over a year ago

Thanks for making it answer.

prime Over a year ago

i do this but it seems that it get data but it isn't appear . i dont know why

Jobelle · Accepted Answer · 2016-01-21 11:40:30Z

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<script>

    $(document).ready(function () {
        for (var i = 0; i < 11; i++) {
            $("#list").append('<li class="list-message" data-ix="list-item"><a class="w-clearfix w-inline-block" href="chat.html" data-load="1"><div class="w-clearfix column-left"><div class="image-message"><img src="images/128.jpg"></div></div><div class="column-right"><div class="message-title">James White</div><div class="message-text">Hey dude! We are waiting for you at the main station, we will meet you near to....</div></div></a></li>');

        }

    });
</script>
</head>
<body>
   <div class="body" id="list">
        <ul class="list list-messages" id="Ul1">
        </ul>
      </div>
</body>
</html>

prime · Accepted Answer · 2016-01-21 15:32:10Z

0

I solve this problem by delete "data-ix="list-item" Now My Code is : $("#list").append('James WhiteHey dude! We are waiting for you at the main station, we will meet you near to....'); I dont Know Why But it is running now .

answered Jan 21, 2016 at 15:32

prime

3512 gold badges6 silver badges18 bronze badges

Collectives™ on Stack Overflow

Create list items in javascript

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related