JavaScriptから生成された動的HTMLタグ、2単語クラスが機能しない

Question

私は、APIの応答から動的HTMLを作成しようとしています。 2単語のクラス名を得るたびに、スペースが見えるときに文字列が終了するので、両方の単語を保存することができません。以下を参照してください：

例えば

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-スペースシャトルであれば、クラスが 'FA' ではない 'の両方FA FA-スペースシャトル' として設定されます。どのようにjavascriptを使用してこれを回避するための任意のアイデアですか？

Answer 1

私は2つの単語クラス名を取得するたびに

なし2ワードクラス名はありません。あなたが持っているものは2つのクラスです。

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