jQuery Append Nesting

Question

var f = a('<span class="customSelectInnerText" />');
var e = a('<span class="customSelect"><span class="customSelectInner"></span></span>').append(f);

results in:

<span class="customSelect>
   <span class="customSelectInner"></span>
   <span class="customSelectInnerText">Text</span>
</span>

instead of the desired:

<span class="customSelect>
   <span class="customSelectInner">
      <span class="customSelectInnerText">Text</span>
   </span>
</span>

gdoron · Accepted Answer · 2013-01-15 08:31:45Z

2

If you want just to adjust your code, you need to append f to .customSelectInner, it can be done with find.

var f = a('<span class="customSelectInnerText" />');
var e = a('<span class="customSelect">' +
          '<span class="customSelectInner"></span></span>')
         .find('.customSelectInner')append(f);

Note that I would break that code so every element has it's own variable, it's a lot more readable and easier to maintain and debug.

answered Jan 15, 2013 at 8:31

gdoron

151k59 gold badges302 silver badges376 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Konstantin Dinev · Accepted Answer · 2013-01-15 08:30:53Z

1

Your statement selects the outer most element. You have to select the inner child before appending the previous <span>. Change to:

var e = a('<span class="customSelect"><span class="customSelectInner"></span></span>')
            .children().append(f);

answered Jan 15, 2013 at 8:30

Konstantin Dinev

35k14 gold badges79 silver badges103 bronze badges

Comments

MAAAAANI · Accepted Answer · 2013-01-15 09:46:09Z

1

var f = a('<span class="customSelectInnerText" />');

var e = a('<span class="customSelect"><span class="customSelectInner"></span></span>');
$(".customSelectInner").append(f);

answered Jan 15, 2013 at 9:46

MAAAAANI

1962 silver badges10 bronze badges

Collectives™ on Stack Overflow

jQuery Append Nesting

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related