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

Ответ 1

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

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

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

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

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

Ответ 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

Ответ 3

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

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

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

Ответ 4

Согласно официальной документации 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, который вы хотите добавить.

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

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

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

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

Ответ 9

Предположим, что у нас есть сценарий для динамического изменения содержимого HTML-тегов для форматирования, мы не можем использовать $('# id'). text(); потому что он не примет текст с html, отформатированным как жирный текст, чтобы сделать это, нам нужно использовать метод jQuery append, но как альтернативу методу .text() просто пустое время, когда нам нужно для обновления и использования метода добавления.

    var fileImportStatus;
    $('#id').change(function(){
            if($('#id').is(':checked')){
                fileImportStatus = "<strong>ON</strong>";

            }else {
                fileImportStatus = "<strong>OFF</strong>";
            }
        });

        $('#saveBtn').click(function(){
            $('#fileImportStatusTxt').empty();
            $('#fileImportStatusTxt').append('File Import is ' + fileImportStatus);
       });