Question

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!

Answer 1

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);