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

227

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

Либо:

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

Или:

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

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

— Ashwin
источник

8

Это просто вопрос повторного использования. Ваш звонок.

— Roko C. Buljan

@gdoron под многократным использованием Я имею в виду: если у вас есть элемент внутри переменной, вы можете повторно вызывать эту переменную везде, где вам нужно, как в вашем примере.

— Roko C. Buljan

2

Почему .html, но не .appendво 2-м случае?

— инженер

@ Инженер - Извините, здесь была ошибка. Я исправил это.

— Эшвин

Я думал, что последний метод был быстрее с точки зрения скорости выполнения, но первый кажется (на 10-40%) быстрее: jsperf.com/jquery-append-string-vs-append-jquery-reference

— Фабрицио Кальдеран

339

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

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

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

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

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

— Гдорон поддерживает Монику
источник

10

На $мой взгляд, хорошая практика начинать имена коллекций jQuery с " ". Просто отметьте, что то, что вы сделали, не требует $div:$("<div>", {id: 'foo', class: 'a', click: function () {}}).appendTo("#box");

— Таблетки от взрыва

Эти знаки доллара необходимы или опечатка? $div, Я не видел этот синтаксис раньше, но я новичок в Jquery.

— felwithe

Я всегда использую $, если переменная является объектом jquery, $ _, если это коллекция jQuery, и _var, если это счетчик. Вар для регулярных переменных.

— Кейси

1

где документация для этого способа создания элемента? $("<div>", {id: "foo", class: "a"});, Я хочу знать, есть ли другие варианты для этого

— Саба Аханг

@gdoron, пожалуйста, взгляните на мой вопрос stackoverflow.com/questions/35413044/…

— Vixed

74

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

$('#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

— Ниранджан Сингх
источник

Спасибо за эту ссылку на ссылку jQuery по созданию новых элементов HTML . Так сложно гуглить за это.

— Боб Стейн

Лучше сделай это так: stackoverflow.com/a/43719563/383904

— Роко Бульян

25

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

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

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

— Даршан
источник

4

classдолжен быть в кавычках, в соответствии с документами (через ссылку на Документы выше): «имя« класс »должно быть заключено в кавычки в объекте, так как это зарезервированное слово JavaScript, и« className »нельзя использовать, так как оно ссылается на свойство DOM , а не атрибут. "

— Исаак Грегсон

5

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

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

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

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

— Алан Донг
источник

2

Согласно документации для 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
});

— Анурадха Мудалиге
источник

Я добавил цитаты. Если вы не заключите classв кавычки, это молча провалится и может привести к безумию.

— Джон Хенкель

0

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

— jbabey
источник

1

@ При втором подходе вы можете по ошибке стереть все остальные дочерние элементы контейнера, который вы модифицируете: jsfiddle.net/jbabey/RBXq5/1

— jbabey

0

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

— Таблетки взрыва
источник

Ох .. Я имею в виду не использовать добавить здесь;)

— Эшвин

0

Также возможно создать элемент div следующим образом:

var my_div = document.createElement('div');

добавить класс

my_div.classList.add('col-10');

также может выполнять append()иappendChild()

— nabila_ahmed
источник