Добавление html-элемента в jQuery - различия между 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, только с более простым для понимания и менее загроможденным синтаксисом.

OneРазница между JavaScript createElement и innerHTML / JQuery в вашем примере заключается в том, что JQuery и innerHTML требуют, чтобы предоставленный HTML был проанализирован, а затем превращен в узлы DOM, а затем прилагается.Чистый JavaScript всегда будет быстрее в этом сценарии, потому что вы пропускаете этот шаг анализа, однако, это, скорее всего, незначительная разница в производительности.

На самом деле все сводится к тому, что вам удобно и насколько вы заинтересованы в оптимизации вашего кода для повышения производительности - и в этом случае я бы рискнул сказать, что если вы решили использовать createElement, потому чтопроизводительности, это можно считать излишней оптимизацией.