Ответ 1
Они дают одинаковые результаты в jQuery.
Возможный дубликат:
$('<element> ') vs $('< element/ > ') в jQuery
Какой из этих двух способов является правильным:
$('<div>')
или
$('<div />')
Они оба работают. Является ли один из способов более правильным, чем другой, или оба они всегда работают?
Они дают одинаковые результаты в jQuery.
Из docs:
Если строка передается как параметр в $(), jQuery проверяет строку, чтобы увидеть, похоже ли она на HTML (т.е. имеет
<tag ... >
где-то внутри строки). Если нет, строка интерпретируется как селектор как описано выше. Но если строка кажется HTML-фрагмент, jQuery пытается создать новые элементы DOM, как описано по HTML. Затем создается и возвращается объект jQuery, который ссылается к этим элементам. Вы можете выполнить любой из обычных jQuery-методов на этот объект:
$('<p id="test">My <em>new</em> text</p>').appendTo('body');
Если HTML более сложный, чем один тег без атрибутов, так как он находится в в приведенном выше примере фактическое создание элементов обрабатывается браузера innerHTML. В большинстве случаев jQuery создает новый и устанавливает свойство innerHTML элемента в HTML-фрагмент, который был передан. Когда параметр имеет один тег, например
$('<img />') or $('<a></a>')
, jQuery создает элемент, используя встроенная функция createElement() JavaScript.
Чтобы обеспечить совместимость между платформами, фрагмент должен быть хорошо сформирован. Теги, которые могут содержать другие элементы, должны быть сопряжены с закрывающим тегом:
$('<a href="http://jquery.com"></a>');
В качестве альтернативы, jQuery позволяет синтаксис XML-подобных тегов (с пробелом или без него перед косой чертой):
$('<a/>');
Теги, которые не могут содержать элементы, могут быть быстро закрыты или нет:
$('<img />');
$('<input>');
Хотя кажется, что они дают одинаковый результат, но на основе использования они могут не генерировать одинаковый результат. Например:
В то время как jQuery parse $('<div> <p>')
, тег <p>
будет детьми тега <div>
, поэтому результатом будет: <div> <p></p> </div>
И хотя jQuery parse $('<div/> <p/>')
, тег <p/>
будет sibling тега <div/>
, поэтому результат будет выглядеть следующим образом: <div></div> <p></p>
Оба варианта дают вам тот же результат, но этот
$('<div />', {id:"myID",class:"mycssClass class2 clazzz",some-attribute: "value"});
лучше, более читаемо, чем
$('<div id="myId" class="mycssClass class2 clazzz" some-attribute="value"></div>');