HTML異なるスタイル

Question

以下に書かれた2つのスタイルのhtmlコードの違いは誰にでも分かります。

return '<div id='suggestionId' class="autocomplete-suggestion">No Message Found</div>'; 

対

var autoCompleteSuggestion; 
autoCompleteSuggestion = $('<div/>').attr({id: 'suggestionId'}).addClass('suggestion').html('No Message Found'); 
return autoCompleteSuggestion; 

結果は、それが呼び出されたスクリプトの種類を下記のスクリプトと同じです。もっと知りたいです

Answer 1

最初はハードコアのバニラジャバスクリプトです。 2番目はjQuery APIを使用して文字列を作成します。

また、最初のものは引用符を間違って使用しています。しかし、それは意図的ではないようです。

Answer 2

すべてのあなたの最初のスクリプトの文句を言わない作業の最初に、あなたが最初のコード

return '<div id='suggestionId' class="autocomplete-suggestion">No Message Found</div>'; //you should use id="suggestionId". 

を使用するためには、JavaScriptコードはdiv要素のタグと属性が含まれている文字列を返します。

2番目のコードはJQueryで記述され、JQuery関数で作成された文字列を返します。

結果（構文エラーがない場合）は同じになります。

Answer 3

どちらも単なるストレートHTMLではありません。

最初はバニラジャバスクリプトです。しかし、エラーをスローし、IDを表示されません。この

return '<div id=' + suggestionId + ' class="autocomplete-suggestion">No Message Found</div>'; 

そうでないsuggestionIdのように記述する必要があります。

第二つがjQueryを使用して書かれているが、両方はブラウザにそれをレンダリングするだけ

return $('<div/>').attr({id: 'suggestionId'}).addClass('suggestion').html('No Message Found'); 

なるように変更することができます。