Предпочтительный способ создания нового элемента с помощью jQuery

Question

У меня есть 2 способа, которыми я могу создать <div> с помощью jQuery,

Или:

var div = $("<div></div>");
$("#box").append(div);

Или же:

$("#box").append("<div></div>");

Каковы недостатки использования второго способа, кроме повторного использования?

Answer 1

Первый вариант дает вам больше гибкости:

var $div = $("<div>", {id: "foo", "class": "a"});
$div.click(function(){ /* ... */ });
$("#box").append($div);

И конечно .html('*') переопределяет содержимое в то время как .append('*') нет, но я думаю, это был не твой вопрос.

Еще одна хорошая практика - префикс ваших переменных jQuery с помощью $:
Есть ли какая-то конкретная причина использования $ с переменной в jQuery

Размещение цитат по всему "class" Имя свойства сделает его более совместимым с менее гибкими браузерами.

Answer 2

Я лично считаю, что для кода важнее быть читаемым и редактируемым, чем исполнителем. Который из них вам удобнее смотреть, и он должен быть тем, который вы выбрали для вышеуказанных факторов. Вы можете написать это как:

$('#box').append(
  $('<div/>')
    .attr("id", "newDiv1")
    .addClass("newDiv purple bloated")
    .append("<span/>")
      .text("hello world")
);

И ваш первый метод как:

// create an element with an object literal, defining properties
var $e = $("<div>", {id: "newDiv1", name: 'test', class: "aClass"});
$e.click(function(){ /* ... */ });
// add the element to the body
$("#box").append($e);

Но насколько читаемость идет; Подход JQuery мой любимый. Следуйте этой полезной уловке, заметкам и рекомендациям jQuery

Answer 3

Гораздо более выразительным образом,

jQuery('<div/>', {
    "id": 'foo',
    "name": 'mainDiv',
    "class": 'wrapper',
    "click": function() {
      jQuery(this).toggleClass("test");
    }}).appendTo('selector');

Ссылка: Документы

Answer 4

Согласно официальной документации jQuery

Чтобы создать элемент HTML, $("<div/>") или же $("<div></div>") является предпочтительным.

Тогда вы можете использовать либо appendTo, append, before, after и так далее,. вставить новый элемент в DOM.

PS: jQuery версия 1.11.x

Answer 5

Согласно документации для 3.4, предпочтительно использовать атрибуты сattr() метод.

$('<div></div>').attr(
  {
    id: 'some dynanmic|static id',
    "class": 'some dynanmic|static class'
  }
).click(function() {
  $( "span", this ).addClass( "bar" ); // example from the docs
});

Answer 6

У меня есть новая идея, используя .html(content)

Вы можете поставить пустой <div></div> ранее в том месте, где вы хотите, не забудьте установить идентификатор для этого DIV.

После этого используйте $("#divId").html(content) заменить пустой DIV новым контентом, который вы хотите добавить.

Answer 7

Также возможно создать элемент div следующим образом:
var my_div = document.createElement('div');
добавить класс
my_div.classList.add('col-10');
также может выполнять append() и appendChild()

Answer 8

Я бы порекомендовал первый вариант, где вы на самом деле строите элементы, используя jQuery. второй подход просто устанавливает свойство innerHTML элемента в строку, которая оказывается HTML, более подвержена ошибкам и менее гибка.

Answer 9

Если #box пусто, ничего, но если это не так, они делают совершенно разные вещи. Бывший добавит div как последний дочерний узел #box, Последний полностью заменяет содержимое #box с одним пустым div, текст и все.