jquery - 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

如果您只想调整代码，则需要附加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 2

您的语句选择最外面的元素。在附加上一个之前，您必须选择内部子级<span>。改成：

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

Answer 3

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

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