Как создать DOM node как объект?

Я хотел бы создать DOM node, установить атрибут 'id', а затем добавить его в 'body'. Следующее, похоже, не работает, потому что jQuery не видит мой шаблон в качестве объекта:

var template = "<li><div class='bar'>bla</div></li>";
template.find('li').attr('id','1234');
$(body).append(template);

Как я могу сказать jQuery рассматривать это как объект, поэтому find() работает на нем?

Ответ 1

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

var e = $("<ul><li><div class='bar'>bla</div></li></ul>");
$('li', e).attr('id','a1234');  // set the attribute 
$('body').append(e); // put it into the DOM

Ввод e (элементы возврата) дает jQuery context, в котором применяется CSS-селектор. Это не позволяет применить идентификатор к другим элементам дерева DOM.

Проблема заключается в том, что вы не используете UL. Если вы поместите голой ли в дерево DOM, у вас появятся проблемы. Я думал, что это может справиться с этим, но это невозможно.

Возможно, вы не ставите голый LI в дерево DOM для вашей "реальной" реализации, но UL необходимы для этого. Вздох.

Пример: http://jsbin.com/iceqo

Кстати, вас также может заинтересовать microtemplating.

Ответ 2

Попробуйте следующее:

var div = $('<div></div>').addClass('bar').text('bla');
var li = $('<li></li>').attr('id', '1234');
li.append(div);

$('body').append(li);

Очевидно, что нет смысла добавлять li непосредственно в тело. В принципе, трюк состоит в том, чтобы построить дерево элемента DOM с помощью $('your html here'). Я предлагаю использовать модификаторы CSS (.text(),.addClass() и т.д.), В отличие от того, что jquery обрабатывает необработанный HTML-код, это значительно облегчит изменение вещей позже.

Ответ 3

var template = $( "<li>", { id: "1234", html:
  $( "<div>", { class: "bar", text: "bla" } )
});
$('body').append(template);

Как насчет этого?

Ответ 4

Сначала сделайте свой шаблон в объект jQuery:

 var template = $("<li><div class='bar'>bla</div></li>");

Затем установите атрибуты и добавьте их в DOM.

 template.find('li').attr('id','1234');
 $(document.body).append(template);

Обратите внимание, что, однако, не имеет никакого смысла добавлять li непосредственно в DOM, поскольку li всегда должен быть дочерними элементами ul или ol. Также лучше не делать jQuery разбора необработанного HTML. Вместо этого создайте ли, установите его атрибуты. Создайте div и установите атрибуты. Вставьте div в li, а затем добавьте li в DOM.

Ответ 5

И вот один лайнер:

$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body")

Но мне интересно, почему вы хотели бы добавить атрибут id на более позднем этапе, а не вводить его непосредственно в шаблон.

Ответ 6

Существует три причины, по которым ваш пример не работает.

Исходная переменная "шаблон" не является объектом jQuery/DOM и не может быть проанализирована, это строка. Сделайте его объектом jQuery, обернув его в $(), например: template = $(template)
Как только переменная "template" является объектом jQuery, вам нужно понять, что <li> является корневым объектом. Поэтому вы не можете найти корень LI node и получить какие-либо результаты. Просто примените ID к объекту jQuery.
Когда вы назначаете идентификатор HTML-элементу, он не может начинаться с символа числа с любой версией HTML до HTML5. Он должен начинаться с буквенного символа. С HTML5 это может быть любой символ без пробелов. Подробнее см. В Что такое допустимые значения для атрибута id в HTML?

PS: Окончательная проблема с образцом кода LI не может быть применена к BODY. Согласно требованиям HTML он всегда должен содержаться в списке, то есть UL или OL.