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)

}

函数tripleAppend（）{
//1-使用jQuery追加，如下所示：
var with jquery=$（“
”）.text（“用jquery追加”）
//2-使用直接格式化的html：
var withhtml=“追加html
”
//3-创建并附加DOM元素：
var withDOM=document.createElement（“p”）；
withDOM.innerHTML=“追加DOM元素”
//或者使用dom.textContent=（..）
$（“body”）.append（带jQuery、带HTML、带DOM）
}

---

这三种方法之间是否有重要的区别？是否有哪一种方法对于更高级的附加来说更具可移植性或限制性？如果我要选择其中一个作为我的“go to”解决方案，是否有理由选择其中一个（保存的个人语法首选项）？

无论哪一个适合您的项目。

这既有条件的，也有优惠的

您喜欢较短的语法和JQuery对象的特性吗？然后使用JQuery。 注意，JQuery是JavaScript的一个子集，因此在后台JQuery做的事情与JavaScript做的事情相同，只是语法更容易理解，不太混乱

在您的示例中，JavaScript

createElement

和

innerHTML

/

JQuery

之间的一个区别是

JQuery

和

innerHTML

都需要解析提供的HTML，然后将其转换为DOM节点，然后追加。在这种情况下，纯JavaScript总是会更快，因为您跳过了解析步骤，但是，这很可能是一个微不足道的性能差异

---

实际上，这一切都取决于您对什么感到满意，以及您对优化代码以提高性能的关注程度。在本例中，我冒昧地说，如果您确实因为性能原因决定使用

createElement

，那么这可能被认为是多余的优化。

.text（）

不会将文本解释为HTML；通过设置

withDOM.textContent

而不是

withDOM.innerHTML

，您将获得相同的效果。很抱歉，DOM不需要解析html（因为我没有向他提供任何内容），但其他两个会解析（因为我正在传递它需要解释的标记）？但在大多数情况下，性能可以忽略不计。我读对了吗？@LogicOnAbstractions完全正确。