HTML不同樣式

Question

誰能告訴我下面編寫的兩種html代碼樣式之間的區別是什么。

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

VS

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

結果是相同的，下面提到的腳本稱為哪種腳本。 想了解更多

Answer 1

第一個是硬編碼的香草javascript。 第二個使用jQuery api構建字符串。

另外，您的第一個錯誤地使用了引號。 但這似乎不是故意的。

Answer 2

首先，第一個腳本無法正常工作，因為您使用

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

第一個代碼是一個javascript代碼，它返回一個字符串，其中包含div的標簽和屬性。

第二個代碼用JQuery編寫，並返回由JQuery函數構建的字符串。

結果（如果沒有語法錯誤）將是相同的。

Answer 3

它們都不是純HTML。

第一個是香草javascript。 但是應該這樣寫

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

否則， suggestionId會引發錯誤，並且不會呈現ID。

第二個是使用jQuery編寫的，但是可以修改為

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

兩者都會向瀏覽器呈現相同的內容。