Подтвердить что ты не робот

Лучший способ создания вложенных элементов HTML с помощью jQuery

Если мне нужно создать пару вложенных элементов DOM, я знаю один способ сделать это, это записать их как длинную строку, а затем поместить их в документ с помощью подходящей функции jQuery. Что-то вроде:

elem.html(
'<div class="wrapper">
    <div class="inner">
        <span>Some text<span>
    </div>
    <div class="inner">
        <span>Other text<span>
    </div>
</div>');

Этот путь, очевидно, не самый чистый. Укус не занимает слишком много времени, чтобы стать беспорядочным, и редактирование становится проблемой. Я больше предпочитаю эту нотацию:

$('<div></div>', {
    class : 'inner'
})
.appendTo( elem );

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

В принципе, вопрос в том, что лучший способ создания вложенных элементов HTML "на лету" без необходимости иметь дело с грязными длинными строками?

Примечание. Я знаю шаблоны двигателей. Однако это вопрос о создании всего лишь пары HTML-элементов на лету. Например, при построении зависимостей DOM для плагина или подобных случаев.

4b9b3361

ОТВЕТЫ

Ответ 1

пишите их как длинную строку и помещайте их в документ, используя подходящая функция jQuery. Что-то вроде:

Проблема с этим подходом заключается в том, что вам понадобится многострочная строка - Javascript не поддерживает, поэтому на самом деле вы получите:

elem.html(
'<div class="wrapper">'+
    '<div class="inner">'+
        '<span>Some text<span>'+
    '</div>'+
    '<div class="inner">'+
        '<span>Other text<span>'+
    '</div>'+
'</div>');

Используя метод, который вы предложили выше, это примерно так же чисто, как я мог бы его получить:

elem.append(
    $('<div/>', {'class': 'wrapper'}).append(
        $('<div/>', {'class': 'inner'}).append(
            $('<span/>', {text: 'Some text'})
        )
    )
    .append(
        $('<div/>', {'class': 'inner'}).append(
            $('<span/>', {text: 'Other text'})
        )
    )
);

Другим преимуществом этого является то, что вы можете (при желании) получить прямые ссылки на каждый вновь созданный элемент без повторного запроса DOM.

Мне нравится писать polyglots, поэтому, чтобы сделать мой код повторно доступным, я обычно делаю что-то вроде этого (поскольку jQuery .html() doesn 't поддержка XML):

// Define shorthand utility method
$.extend({
    el: function(el, props) {
        var $el = $(document.createElement(el));
        $el.attr(props);
        return $el;
    }
});

elem.append(
    $.el('div', {'class': 'wrapper'}).append(
        $.el('div', {'class': 'inner'}).append(
            $.el('span').text('Some text')
        )
    )
    .append(
        $.el('div', {'class': 'inner'}).append(
            $.el('span').text('Other text')
        )
    )
);

Это не очень отличается от метода №2, но он дает вам более портативный код и не полагается внутри на innerHTML.

Ответ 2

Мне нравится следующий подход:

$('<div>',{
  'class' : 'wrapper',
  'html': $('<div>',{
    'class' : 'inner',
    'html' : $('<span>').text('Some text')
  }).add($('<div>',{
    'class' : 'inner',
    'html' : $('<span>').text('Other text')
  }))
}).appendTo('body');

В качестве альтернативы сначала создайте свою упаковку и продолжайте добавлять к ней:

var $wrapper = $('<div>',{
    'class':'wrapper'
}).appendTo('body');
$('<div>',{
    'class':'inner',
    'html':$('<span>').text('Some text')
}).appendTo($wrapper);
$('<div>',{
    'class':'inner',
    'html':$('<span>').text('Other text')
}).appendTo($wrapper);

Ответ 3

Я нашел это решение, пока я изучал что-то еще. Это часть "Введение в jQuery" создателем jQuery и использует end().

$("<li><a></a></li>") // li 
  .find("a") // a 
  .attr("href", "http://ejohn.org/") // a 
  .html("John Resig") // a 
  .end() // li 
  .appendTo("ul");

Применение к вашему вопросу было бы...

$("<div><span></span></div>") // div 
  .addClass("inner") // div 
  .find("span") // span 
  .html("whatever you want here.") // span 
  .end() // div 
  .appendTo( elem );

Ответ 4

Мне нравится этот подход

    $("<div>", {class: "wrapper"}).append(
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        ), 
        $("<div>", {class: "inner"}).append(
            $("<span>").text(
                "Some text"
            )
        )
    ).appendTo("body")

Ответ 5

Существует третий путь, помимо длинных уродливых строк или огромных методов, соединенных вместе. Вы можете использовать простые старые переменные для хранения отдельных элементов:

var $wrapper = $("<div/>", { class: "wrapper" }),
    $inner = $("<p/>", { class: "inner" }),
    $text = $("<span/>", { class: "text", text: "Some text" });

Затем связать все вместе с append:

$wrapper.append($inner.append($text)).appendTo("#whatever");

Результат:

<div class="wrapper">
  <p class="inner">
    <span class="text">Some text</span>
  </p>
</div>

По-моему, это, безусловно, самый чистый и читаемый подход, и он также имеет преимущество в разделении данных с кодом.

EDIT: Одно из предостережений заключается в том, что нет простого способа скомбинировать textContent с вложенными элементами (например, <p>Hello, <b>world!</b></p>.) В этом случае вам, вероятно, потребуется использовать один других методов, таких как строковый литерал.

Ответ 6

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

'<div id="id-1"'
+ ' class="class-1 class-2 class-3 class-4 class-5 class-6">'
+ '</div>'

или следующим образом:

'<div id="id-1" class="'
    + 'class-1 class-2 class-3 class-4 class-5 class-6'
+ '">'
+ '</div>'

Другим вариантом является, вероятно, использование haml на стороне клиента, если это возможно. Таким образом, у вас будет еще меньше ненужного шума.