Кращий спосіб створення нового елемента за допомогою jQuery

227

У мене є два способи створити <div>використання jQuery.

Або:

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

Або:

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

Які недоліки використання іншого способу, крім повторного використання?

— Ешвін
джерело

8

Це просто питання повторного використання. Твій дзвінок.

— Roko C. Buljan

@gdoron шляхом повторної використання Я маю на увазі: якщо у вас є елемент всередині змінної, ви можете повторно викликати цей var де завгодно, як у вашому прикладі.

— Roko C. Buljan

2

Чому .html, але не .appendу 2-му випадку?

— Інженер

@Engineer - Вибачте, тут помилка. Я це виправив.

— Ешвін

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

— Fabrizio Calderan

339

Перший варіант забезпечує більшу гнучкість:

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

І звичайно, це .html('*')переорієнтовує вміст .append('*'), але ні, але я думаю, це не було вашим питанням.

Ще однією хорошою практикою є префіксація змінних jQuery за допомогою $:
Чи є якась конкретна причина використання $ зі змінною в jQuery

Розміщення лапок навколо назви "class"ресурсу зробить його більш сумісним із менш гнучкими браузерами.

— gdoron підтримує Моніку
джерело

10

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

— Вибухові таблетки

Чи потрібні ці знаки долара чи друкарська помилка? $div. Я раніше не бачив цього синтаксису, але я новачок у Jquery.

— 1515

Я завжди використовую $ - це змінна є об'єктом jquery, $ _, якщо це колекція jQuery, і _var, якщо вона є лічильником. 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 . Так важко в Google для цього.

— Боб Штейн

Краще робити так: stackoverflow.com/a/43719563/383904

— Roko C. Buljan

25

Набагато виразніший спосіб,

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

Довідка: Документи

— Даршан
джерело

4

classмає бути в лапках, згідно з документами (за посиланням Docs вище): "Ім'я" клас "повинно бути цитоване в об'єкті, оскільки це зарезервоване слово 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
джерело