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!
Share Improve this question edited Sep 4, 2012 at 6:52 Danil Speransky 30.5k6 gold badges69 silver badges78 bronze badges asked Aug 23, 2012 at 12:24 wingywingy 5592 gold badges6 silver badges14 bronze badges 3- 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
Reset to default 5Your 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)