How can I create dynamic tags?

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png",
}).appendTo("#" + imgContainer);

It will create <img src="/images/flower.png" id="image-1" />

I want to create <span> tag around <img> tag.

i.e. <span><img src="/images/flower.png" id="image-1" /></span>

How can I create dynamic tags?

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png",
}).appendTo("#" + imgContainer);

It will create <img src="/images/flower.png" id="image-1" />

I want to create <span> tag around <img> tag.

i.e. <span><img src="/images/flower.png" id="image-1" /></span>

• javascript
• jquery
• html
• tags

Share Improve this question Follow edited Oct 29, 2012 at 9:25 VisioN 146k3434 gold badges287287 silver badges289289 bronze badges asked Oct 29, 2012 at 9:17 AsmitaAsmita 1,19033 gold badges1010 silver badges3131 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can use wrap():

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png"
}).appendTo("#" + imgContainer).wrap("<span />")

You can use wrap() to wrap one element inside another. For example:

$("<img />").attr({
    id: "image-1",
    src: "/images/flower.png",
})
.appendTo("#" + imgContainer)
.wrap("<span />");

DOM operations are oh-so-expensive; just prepare the markup you're after and then append it as needed!

//Before:
$("<img />")                   //#1, create an element outside of the tree
.attr({                        //#2? change its attributes
  id: "image-1",
  src: "/images/flower.png"
})
.appendTo("#" + imgContainer)  //#3, add the element to DOM
.wrap("<span />");             //#4, create and add another element to DOM

//After:
$('<span><img src="/images/flower.png" id="image-1"></span>')  //#1
.appendTo("#" + imgContainer);                                 //#2

Here is a jsperf test case which results in ~5K ops/sec for the first case and ~14K for the latter (on my pretty decent box).

This is not premature optimization, either. If you have, for instance, ajax-populated 7x10 table and you create every cell individually... and wrap them into <tr> elements... and then add it to a table, the overhead adds up. Operate on a string and your script will be at least 80 times faster!

Another aspect to remember is that jsperf explicitly measures javascript performance only. If you're manipulating a table, its content will be even more aggressively re-painted/re-flown.