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


227

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

Либо:

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

Или:

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

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


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 , а не атрибут. "
Исаак Грегсон


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, более подвержена ошибкам и менее гибка.


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()

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.