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

第一个是硬编码的vanilla 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。

第一个是vanilla javascript。但应该写成这样的

[(A touch B) over C] ::: {D touch E}

否则return '<div id=' + suggestionId + ' class="autocomplete-suggestion">No Message Found</div>'; 将抛出错误而不呈现id。

第二个是使用jQuery编写的，但可以修改为

suggestionId

两者都会向浏览器呈现相同内容。