Javascript JS中材料设计应用程序中的空屏幕_Javascript_Jquery_Html

Javascript JS中材料设计应用程序中的空屏幕

javascript jquery html

Javascript JS中材料设计应用程序中的空屏幕,javascript,jquery,html,Javascript,Jquery,Html,我正在动态生成一个列表。下面是应用程序静态版本的html <div class="list-group"> <div class="list-group-item"> <div class="row-picture"> <img class="circle" src="http://qph.is.quoracdn.net/main-thumb-4972069-200-pfgvuffbxtqsqdduzxzv

我正在动态生成一个列表。下面是应用程序静态版本的html

<div class="list-group">
    <div class="list-group-item">
        <div class="row-picture">
            <img class="circle" src="http://qph.is.quoracdn.net/main-thumb-4972069-200-pfgvuffbxtqsqdduzxzvszms.jpeg" alt="icon">
        </div>
        <div class="row-content">
            <h4 class="list-group-item-heading">bla</h4>
            <p class="list-group-item-text">bla</p>
        </div>
    </div>
    <div class="list-group-separator"></div>
    <div class="list-group-item">
        <div class="row-picture">
            <img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
        </div>
        <div class="row-content">
            <h4 class="list-group-item-heading">Tile with another avatar</h4>
            <p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
        </div>
    </div>
    <div class="list-group-separator"></div>

        <div class="list-group-item">
        <div class="row-picture">
            <img class="circle" src="http://lorempixel.com/56/56/people/6" alt="icon">
        </div>
        <div class="row-content">
            <h4 class="list-group-item-heading">Tile with another avatar</h4>
            <p class="list-group-item-text">Maecenas sed diam eget risus varius blandit.</p>
        </div>
    </div>

</div>


布拉
bla
与另一个化身平铺
Maecenas sed diam eget risus varius blandit
与另一个化身平铺
Maecenas sed diam eget risus varius blandit

上面的一个绝对好用。但当我尝试动态生成列表时，问题就出现了这是我的index.html代码

<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/material.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script type="text/javascript" src="js/app.js"></script>

    </head>

    <body>


            <div class="list-group-item">

                 <div class="app">
                  </div>

             </div> 

    </body>
</html>

这是我的app.js

var names = ["one", "two", "thre", "four"];
var phones = ["90000 00000", "911111 000000", "90000 11111", "80000 80808"];
for(var i=0;i<5;i++){

    add(names[i], phones[i]);

}


function add(name, phone){

   var listItem = '<div class="row-picture">' +
    '<img class="circle" src="http://"bla">' +
    '</div>' +
    '<div class="row-content">' +
    '<h4 class="list-group-item-heading">' + name + '</h4>' +
    '<p class="list-group-item-text">' + phone + '</p>' +
    '</div>' +
    '</div>' +
    '<div class="list-group-separator"></div>'; // Use ; here instead of +

$('.app').prepend(listItem);
}

var name=[“一”、“二”、“三”、“四”]；
var电话=[“900000000”、“911111000000”、“900001111”、“8000080808”]；
对于（var i=0；i检查此项！它正在工作

var name=[“一”、“二”、“三”、“四”]；
var电话=[“900000000”、“911111000000”、“900001111”、“8000080808”]；
对于（var i=0；i哪个部分工作不正常？我得到了一个空屏幕，我应该在那里得到一个列表视图。你什么时候得到空屏幕？你说它的追加很好。在控制台中，它追加很好。但我看不到任何列表