从JavaScript生成的动态HTML标签，两字类不工作

Question

我想从api响应中创建动态html。每当我得到一个两字的名字时，我都无法保存这两个单词，因为字符串在看到空格时就结束了。请看下图：

for(var i = 0; i<articles.posts.length; i++){ 
    var cls = 'fa '+articles.posts[i].category;  
    var el = "<article><i class="+cls+"></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>" 

    $("#article-list").last().append(el); 
} 

举例来说，如果 'CLS' 被发FA-航天飞机，该类被设置为 '发' 不能同时 '发FA-航天飞机'。任何想法如何解决这个使用JavaScript？

Answer 1

每当我得到一个双字的类名

有没有两个词的类名。你在那里有两个班。

在该行代码的报价

var el = "<article><i class="+cls+"></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>" 

仔细查看。 class属性没有任何附件。所以，根据HTML规范，这个值在第一个空间结束。加引号是：

var el = "<article><i class='"+cls+"'></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>" 
// -------------------------^-------^ 

例子：

var cls = "fa fa-link"; 
 
var el = "<article><i class='"+cls+"'></i><h2> From the Archive </h2></article>" 
 
document.body.insertAdjacentHTML("beforeend", el);

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>