时间戳

首页 > 解决方案 > 用 jQuery 附加 html 元素 - html、DOM 和 jQuery 附加之间的区别？

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

问题描述

当使用 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 种方法之间是否存在重要区别 - 任何一种更便携或更受限制以用于更高级的附加？如果我要选择其中一个作为我的“首选”解决方案，有什么理由倾向于其中一个（保存的个人句法偏好）？

标签： javascriptjqueryhtmlajaxdom

解决方案

哪一个适合您的项目。

这既是间接的，也是优惠的。

您喜欢较短的语法和 JQuery 对象的特性吗？然后使用 JQuery。需要注意的是，JQuery是JavaScript 的一个子集，因此 JQuery 在后台执行与 JavaScript 相同的操作，只是语法更易于理解且不那么混乱。

在您的示例中， JavaScriptcreateElement和innerHTML/之间的一个区别是，两者都需要解析提供的 HTML，然后转换为 DOM 节点，然后附加。在这种情况下，纯 JavaScript 总是会更快，因为您正在跳过该解析步骤，但是，它很可能在性能上的差异可以忽略不计。JQueryJQueryinnerHTML

实际上，这一切都取决于您对什么感到满意以及您对优化代码以提高性能的关注程度——在这种情况下，我敢说，如果您确实createElement因为性能而决定使用它，那么它可能被认为是多余的优化。

推荐阅读