用jQuery附加html元素-html，DOM和jQuery追加之间的区别？

Question

当使用jQuery将元素追加到页面时，似乎我基本上有3个选项，总结如下：

function  tripleAppend() {
  //1 - append using jQuery, like so:
    var withjquery = $("<p></p>").text("Appending with jquery")
  //2 - Using the html directly formatted:
    var withhtml = "<p>Appending html</p>"
  //3 - Create & append a DOM element:
    var withDOM = document.createElement("p");
  withDOM.innerHTML = "Appending a DOM element"
  //or withDOM.textContent = (....)
  $("body").append(withjquery, withhtml, withDOM)

}

这3种方法之间是否存在重要的区别-任何一种方法更便携或更受高级附件的限制？ 如果我要选择其中一种作为“首选”解决方案，那么有什么理由倾向于一种或另一种（保留的个人语法偏好）？

Answer 1

无论哪种适合您的项目。

这既是偶然的又是优惠的。

您是否喜欢较短的语法和JQuery对象的功能？ 然后使用JQuery。 需要注意的是，JQuery 是 JavaScript的子集，因此在后台JQuery的作用与JavaScript相同，只是语法易于理解且混乱。

在您的示例中，JavaScript createElement和innerHTML / JQuery之间的区别是JQuery和innerHTML都要求先解析提供的HTML，然后将其转换为DOM节点， 然后进行附加。 在这种情况下，纯JavaScript总是会更快，因为您跳过了该解析步骤，但是，在性能上，这很可能是微不足道的。

实际上，这全都取决于您对性能的满意程度以及对优化代码性能的关注程度-在这种情况下，我敢说如果您确实因为性能而决定使用createElement ，则可以将其视为多余的优化。