Javascript 如何正确地给这张卡充气？

我想在页面中查看这张卡，但它没有显示任何内容。 我正在使用firebase作为后端 我尝试将从firebase检索到的数据膨胀到一个表中，它与append（）函数配合得很好，但当尝试使用cardView时，它不起作用 这是我的代码：

index.html：

  <div class="mdl-layout__drawer">
   <span class="mdl-layout-title">Title</span>
    <nav class="mdl-navigation">
     <a class="mdl-navigation__link" href="">Link</a>
     <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
      <a class="mdl-navigation__link" href="">Link</a>
    </nav>
   </div>
   <main class="mdl-layout__content">
     <div class="page-content"> 
        <!-- Your content goes here -->
                     <div id="comments" class="inline-grid">
                     </div>
      </div>
     </main>

标题

这是我的index.js：

var rootRef = firebase.database().ref().child("Stories");
rootRef.on("child_added", snap =>{
var title = snap.child("title").val();
var content = snap.child("content").val();
$("#comments").append(" <div class="mdl-card__title">
<h2 class="mdl-card__title-text">"+ title +"</h2>
 </div>
 <div class="mdl-card__supporting-text">
     "+ content +"
  </div>
   <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-
   effect">
     Get Started
    </a>
   </div>
   <div class="mdl-card__menu">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-
     effect">
     <i class="material-icons">share</i>
    </button>
   </div>");
    });

var rootRef=firebase.database（）.ref（）.child（“故事”）；
rootRef.on（“添加的子对象”，snap=>{
var title=snap.child（“title”）.val（）；
var content=snap.child（“content”）.val（）；
$（“#注释”）。附加（”
“+标题+”
“+内容+”
开始
分享
");
});

在

.append（）

中，作为参数传递的HTML不是有效字符串。在指定类属性时，您使用双引号，JavaScript将其解释为字符串的结尾，因为您也使用双引号来括起字符串

解决这个问题的一个方法是使用反斜杠转义字符串中的双引号：

“\”

另一种方法是将字符串用单引号括起来，而不是用双引号括起来。然后您可以编写如下内容：

var html = '<div class="mdl-card__title">'+
        '<h2 class="mdl-card__title-text">'+ title +'</h2>'+
      '</div>'+
      '<div class="mdl-card__supporting-text">'+ content +'</div>'+
      '<div class="mdl-card__actions mdl-card--border">'+
        '<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Get Started</a>'+
      '</div>'+
      '<div class="mdl-card__menu">'+
        '<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">'+
            '<i class="material-icons">share</i>'+
        '</button>'+
      '</div>';

$("#comments").append(html);

var html=''+
''+标题+''中+
''+
''+内容+''+
''+
“开始”+
''+
''+
''+
“份额”+
''+
'';
$（“#注释”）.append（html）；

没有必要将字符串分成这么多行，但我更喜欢这种方式，以使HTML更具可读性