Как создать DOM-узел как объект?

Question

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

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

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

Answer 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. Если вы поместите голый li в дерево DOM, у вас будут проблемы. Я думал, что это может справиться / обойти это, но это не может.

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

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

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

Answer 2

Попробуйте это:

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

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

Очевидно, что не имеет смысла добавлять li к телу напрямую. По сути, хитрость заключается в том, чтобы создать дерево элементов DOM с помощью $ ('ваш html здесь'). Я предлагаю использовать модификаторы CSS (.text (), .addClass () и т. Д.), А не делать jquery-анализ необработанного HTML, так как позже это будет намного легче изменить.

Answer 3

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

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

Answer 4

А вот один вкладыш:

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

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

Answer 5

Сначала превратите ваш шаблон в объект 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. Вместо этого создайте li, установите его атрибуты. Создайте div и установите его атрибуты. Вставьте div в li, а затем добавьте li в DOM.

Answer 6

Ваш пример проваливается по трем причинам.

1. Исходная переменная 'template' не является объектом jQuery / DOM и не может быть проанализирована, это строка. Сделайте его объектом jQuery, обернув его в $ (), например: template = $ (template)

2. Как только переменная 'template' является объектом jQuery, вы должны понимать, что

3. является корневым объектом. Поэтому вы не можете искать корневой узел LI и получать какие-либо результаты. Просто примените идентификатор к объекту jQuery.

4. Когда вы назначаете идентификатор элементу HTML, он не может начинаться с цифры с любой версии HTML до HTML5. Он должен начинаться с буквенного символа. В HTML5 это может быть любой непробельный символ. Подробнее см .: Какие допустимые значения для атрибута id в HTML?

PS: Последняя проблема с примером кода - LI не может быть применена к BODY. В соответствии с требованиями HTML он всегда должен содержаться в списке, то есть UL или OL.