Fatal编程技术网

在javascript中创建列表项

javascript jquery cordova

在javascript中创建列表项,javascript,jquery,cordova,Javascript,Jquery,Cordova,我正在使用cordova应用程序。我想使用jquery创建列表项。以下是我的html代码： <div class="body" id="list"> <ul class="list list-messages" id="list"> </ul> </div> 这是我的js代码： <script> $(document).ready(function ()

我正在使用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>


$（文档）.ready（函数（）{
$（“.navbar title”）.html（localStorage.getItem（“Provider”）；
$.ajax({
键入：“Get”，
网址：'http://41.128.183.109:9090/api/data/getalllocations',
成功：功能（数据）{
对于（变量i=0；i<11；i++）{
$（“#list”）.append（“
  • ”）；
}
}
});
});
    它不起作用。请告知

    您应该 不是

    Html（）
    替换值并插入值

    $（文档）.ready（函数（）{
$（“#列表”）.empty（）；
对于（变量i=0；i<11；i++）{
$（“#list”）.append（“
  • ”）；
}    
});

    

      

    

    您应该使用
    .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>');
}

    

    for（变量i=0；i<11；i++）{
$（“#list”）.append（“
  • ”）；
}

    
$（文档）.ready（函数（）{
对于（变量i=0；i<11；i++）{
$（“#list”）.append（“
  • ”）；
}
});

      

    

    我通过删除“data ix=”列表项解决了这个问题
现在我的代码是：
$（“#列表”）.append（‘詹姆斯·怀特希，伙计！我们在车站等你，我们会在……附近等你’）；

    我不知道为什么，但它现在正在运行。
    使用
    append
    而不是
    html（）
    innerHtml
    是一个javascript
    属性
    。它提供html值，您可以设置html值。但是对于推动
    html
    ，您可以使用
    jQuery
    的
    append
    是的，它解决了问题，但是html和innerHtml和append之间有什么不同？谢谢
    .html（）
    是一个jQuery方法，它设置div的HTML；
    。innerHTML
    是一个普通的javascript属性，您可以使用
    item.innerHTML='xxx'
    ；
    .append（）设置其值
    是一种jQuery方法，它将向您添加一些内容div
    innerHtml
    是一个javascript
    属性
    。它提供html值，您可以设置html值。但是对于推送
    html
    ，您可以使用
    jQuery
    的
    append
    的
    yes复选框。正如您已经回答了其他人的问题，但选择做
    $（“#列表）空（）追加之前。例如，如果您的
    ajax
    返回0个数据，那么您首先需要在成功时
    .empty（）
    。在html上，它应该没有
    li
    而不是
    前面的
    列表项
    谢谢你让它回答。我这样做了，但它似乎得到了数据，但它没有出现。我不知道为什么

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