jQuery的追加嵌套

Question

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

結果：

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

而不是所希望：

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

Answer 1

你的語句選擇最外的元件。在添加前面的<span>之前，您必須選擇內心的孩子。更改爲：

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

Answer 2

如果你只想調整你的代碼，你需要追加f到. customSelectInner，它可以與find完成。

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

注意，我會打破代碼，所以每一個元素都有它自己的變量，它的很多更具可讀性，更容易維護和調試。

Answer 3

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

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