CODEWITHSUNDEEP
jqueryappend
eozzy
eozzy

Reputation: 68820

jQuery Append Nesting

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>

Upvotes: 0

Views: 450

Answers (3)

MAAAAANI
MAAAAANI

Reputation: 196

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

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

Upvotes: 1

gdoron
gdoron

Reputation: 150313

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.

Upvotes: 2

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

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

Upvotes: 1

Related Questions