在 JavaScript 中创建列表项

Create list items in javascript

本文关键字：列表 创建 JavaScript      更新时间：2023-09-26

我正在开发科尔多瓦应用程序。我想使用 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()替换div 的内容，.append()将添加一些内容

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

你应该 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>

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

我通过删除"data-ix="list-item"来解决这个问题现在我的代码是： $（"#list"）.append（'James WhiteHey 伙计！我们在总站等你，我们会在附近见到你......' ）; 我不知道为什么，但它现在正在运行.

相关文章：