I want an element to first be replaced with a div then that div will have some children by append():

$(el).html('<div></div>').append('<span></span>').append('<span></span>')

doesn't give me what I want since the div and the spans are siblings.

I also tried:

$(el).replaceWith('<div></div>').append('<span></span>').append('<span></span>')

without success. This line doesn't work with AngularJS (directives).

Is there a simple way to make the spans children of the div?

UPDATE:

This is what I ended up using:

$(element)
  .html($('<div class="property-filter"></div>')
  .append(labelElm)
  .append(amountElm)
  .append(sliderElm));

since it was simple to understand (to me).

Thanks for all the solutions!

I want an element to first be replaced with a div then that div will have some children by append():

$(el).html('<div></div>').append('<span></span>').append('<span></span>')

doesn't give me what I want since the div and the spans are siblings.

I also tried:

$(el).replaceWith('<div></div>').append('<span></span>').append('<span></span>')

without success. This line doesn't work with AngularJS (directives).

Is there a simple way to make the spans children of the div?

UPDATE:

This is what I ended up using:

$(element)
  .html($('<div class="property-filter"></div>')
  .append(labelElm)
  .append(amountElm)
  .append(sliderElm));

since it was simple to understand (to me).

Thanks for all the solutions!

• javascript
• jquery
• html
• dom

• 2 I'm curious as to why this must be done in one line? Just because you can doesn't mean you should. – jsmith Commented Aug 23, 2012 at 12:29
• I know. But if it's possible that would be better. Less code. More succinct code. – wingy Commented Aug 23, 2012 at 12:36
• 1 Just because you're writing LESS code, doesn't mean you are doing a good thing. Think about the readability of your code as you go from left to right. What happens when you e back months later and you need to debug? Your readability decreases with each function you daisy-chain onto the last. If you want less code in production, why not use a tool to minify? – jsmith Commented Aug 23, 2012 at 12:41

6 Answers 6

Your code does not work because $(el).html('<div></div>') returns $(el). It is for chain of methods.

$(el).html($('<div></div>').append('<span></span>').append('<span></span>'));​

Or

$('<div></div>').append('<span></span>').append('<span></span>').appendTo(el);

Why not simply do this?

$(el).html('<div><span></span><span></span></div>')

$(el).html($('<div />').append('<span></span>').append('<span></span>'))

use this

var div = $('<div></div>').append('<span></span>').append('<span></span>');

$(el).parent().html(div);​

This replaces the contents of the $(el) like you asked:

$(el).html('<span />').append('<span />').wrapInner('<div />');​

Try this

var div= $('<div></div>')
var mm= $('<span>b</span>')
var bnd= div.append(mm)
var fresult=bnd.append(mm)
fresult.appendTo(el)​