由JavaScript生成的动态HTML标记，两个单词的类不起作用

我正在尝试从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);
}

（变量i=0；i）的

每当我得到一个两个单词的类名

没有两个单词的类名。你有两个类

例如：


var cls=“fa-fa-link”；
var el=“来自存档”
document.body.insertAdjacentHTML（“beforeed”，el）；
问题是，如果在“cls”周围加引号，它将是类“cls”。我不希望这样。我需要能够从api响应动态生成类。@trebek1:不，不会。上面在输出字符串中加上
”
，无论
cls
的值是什么。
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 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>"
// -------------------------^-------^