Я хотел бы создать 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() работает на нем?
Я бы поместил его в 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.
Попробуйте следующее:
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-код, это значительно облегчит изменение вещей позже.
var template = $( "<li>", { id: "1234", html:
$( "<div>", { class: "bar", text: "bla" } )
});
$('body').append(template);
Как насчет этого?
Сначала сделайте свой шаблон в объект 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.
И вот один лайнер:
$("<li><div class='bar'>bla</div></li>").find("li").attr("id","1234").end().appendTo("body")
Но мне интересно, почему вы хотели бы добавить атрибут id на более позднем этапе, а не вводить его непосредственно в шаблон.
Существует три причины, по которым ваш пример не работает.
Исходная переменная "шаблон" не является объектом jQuery/DOM и не может быть проанализирована, это строка. Сделайте его объектом jQuery, обернув его в $(), например: template = $(template)
Как только переменная "template" является объектом jQuery, вам нужно понять, что <li> является корневым объектом. Поэтому вы не можете найти корень LI node и получить какие-либо результаты. Просто примените ID к объекту jQuery.
Когда вы назначаете идентификатор HTML-элементу, он не может начинаться с символа числа с любой версией HTML до HTML5. Он должен начинаться с буквенного символа. С HTML5 это может быть любой символ без пробелов. Подробнее см. В Что такое допустимые значения для атрибута id в HTML?
PS: Окончательная проблема с образцом кода LI не может быть применена к BODY. Согласно требованиям HTML он всегда должен содержаться в списке, то есть UL или OL.