How to create a DOM node as an object?

Question

I would like to create a DOM node, set the 'id' attribute and then append it to 'body'. The following seems not to work because jQuery doesn't see my template as an object:

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

How can I tell jQuery to treat this as an object so find() works on it?

it doesn't work because you are applying find within the dom element you created. In this case you are trying to find `li`underneath `li`, however there is only a `div` and text `bla`. Try something like this to understand what happens `var template=$("

score 74 · Accepted Answer · edited Jan 19 '16 at 12:11

74

I'd put it in the DOM first. I'm not sure why my first example failed. That's really weird.

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

Putting e (the returns elements) gives jQuery context under which to apply the CSS selector. This keeps it from applying the ID to other elements in the DOM tree.

The issue appears to be that you aren't using the UL. If you put a naked li in the DOM tree, you're going to have issues. I thought it could handle/workaround this, but it can't.

You may not be putting naked LI's in your DOM tree for your "real" implementation, but the UL's are necessary for this to work. Sigh.

Example: http://jsbin.com/iceqo

By the way, you may also be interested in microtemplating.

edited Jan 19 '16 at 12:11

JackLeEmmerdeur

724
11
17

answered Apr 17 '09 at 10:32

cgp

41,026
12
101
131

You're setting the attribute after the object has been appended... My tests say this doesn't work. – bart Apr 17 '09 at 10:45
Yeah, it broke for me as well. Weird. I thought I had run it through. Anyway, this version works. – cgp Apr 17 '09 at 10:50
It works, but if your body has more than one 'li' then the attribute is added to all of these... Maybe adding :last will do. – bart Apr 17 '09 at 11:01
1

No it won't, that's why the e is there to specify context. – cgp Apr 17 '09 at 11:02
Oh hell, it didn't use the context. What a day. – cgp Apr 17 '09 at 11:07
Don't understand, you DO set the contents: $('li',e), but that doesn't do anything... – bart Apr 17 '09 at 12:11
Any idea how to set an ID on the parent element - e.g.
– Sean H Oct 27 '21 at 11:58

Tamas Czinege · Answer 2 · 2009-04-17T10:49:00.727

27

Try this:

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

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

Obviously, it doesn't make sense to append a li to the body directly. Basically, the trick is to construct the DOM elementr tree with $('your html here'). I suggest to use CSS modifiers (.text(), .addClass() etc) as opposed to making jquery parse raw HTML, it will make it much easier to change things later.

edited Apr 17 '09 at 10:49

answered Apr 17 '09 at 10:33

Tamas Czinege

118,853
40
150
176

@TamasCzinege, in li.append(div) why div is appended to li ? – Bineesh Sep 25 '16 at 06:57
This is a cleaner solution than the accepted answer. – Tim Grant Nov 21 '16 at 16:45

score 15 · Answer 3 · edited Feb 08 '13 at 02:51

15

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

What about this?

edited Feb 08 '13 at 02:51

zb'

8,071
4
41
68

answered Sep 19 '12 at 23:54

irio

1,401
14
11

score 3 · Answer 4 · answered Apr 17 '09 at 10:50

First make your template into a jQuery object:

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

Then set the attributes and append it to the DOM.

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

Note that it however makes no sense at all to add a li directly to the DOM since li should always be children of ul or ol. Also it is better to not make jQuery parse raw HTML. Instead create a li, set its attributes. Create a div and set it's attributes. Insert the div into the li and then append the li to the DOM.

I would think that _sshould_ work, but it doesn't. (it's in fact exactly what I posted first) see: http://jsbin.com/eware — cgp, Apr 17 '09 at 10:54

score 3 · Answer 5 · answered Apr 17 '09 at 11:04

3

And here is the one liner:

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

But I'm wondering why you would like to add the "id" attribute at a later stage rather than injecting it directly in the template.

answered Apr 17 '09 at 11:04

gizmo

11,819
6
44
61

2

This doesn't work, we've been down the road before. I'm wondering if it's a bug, because it really seems like it ought to work, and a number of people have ran into this . – cgp Apr 17 '09 at 11:09

score 2 · Answer 6 · edited May 23 '17 at 12:10

There are three reasons why your example fails.

The original 'template' variable is not a jQuery/DOM object and cannot be parsed, it is a string. Make it a jQuery object by wrapping it in $(), such as: template = $(template)
Once the 'template' variable is a jQuery object you need to realize that <li> is the root object. Therefore you cannot search for the LI root node and get any results. Simply apply the ID to the jQuery object.
When you assign an ID to an HTML element it cannot begin with a number character with any HTML version before HTML5. It must begin with an alphabetic character. With HTML5 this can be any non-whitespace character. For details refer to: What are valid values for the id attribute in HTML?

PS: A final issue with the sample code is an LI cannot be applied to the BODY. According to HTML requirements it must always be contained within a list, i.e. UL or OL.

How to create a DOM node as an object?

6 Answers6

Linked