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

у меня есть 2 способа создать <div> используя jQuery.

либо:

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

или:

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

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

8 201
javascript jquery adonetappender createelement jquery-append

8 ответов:

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

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

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

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

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

305

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

$('#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 трюки, заметки и лучшие практики

62

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

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

ссылки: Docs

21

по словам официальная документация jQuery

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

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

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

5

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

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

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

2

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

0

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

0

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

0