javascript - 在JavaScript中创建列表项

我正在使用cordova应用程序。我想使用jquery创建列表项。这是我的html代码：

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


        </ul>
      </div>

这是我的js代码：

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

它不起作用。请指教

最佳答案

您应该append()
 不是html()

Html()替换值，而append()插入值。

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

关于javascript - 在JavaScript中创建列表项，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34922495/