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     lt li gt  lt div class  bar  gt bla lt  div gt  lt  li gt    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

User · Answer

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.

User · Answer

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  lt li gt  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

User · Answer

Try this   var div       lt div gt  lt  div gt    addClass  bar   text  bla    var li       lt li gt  lt  li gt    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

User · Answer

And here is the one liner       lt li gt  lt div class  bar  gt bla lt  div gt  lt  li gt    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

User · Answer

var template        lt li gt      id   1234   html         lt div gt      class   bar   text   bla             body   append template     What about this

User · Answer

I d put it in the DOM first  I m not sure why my first example failed  That s really weird   var e       lt ul gt  lt li gt  lt div class  bar  gt bla lt  div gt  lt  li gt  lt  ul gt        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

[jquery] How to create a DOM node as an object?

Examples related to jquery

Examples related to dom