I am seeing an inconsistency between what UI 1.7.2 does with the DOM structure when you initially build out tabs() and when you add() a tab.

Given:

A container DIV with children (1) UL and (2) DIVs.  The child DIVs contain their own child DIVs which I want to become the tab bodies.

Scenario 1 - Original Build with base markup:

Call tabs() against the main container DIV.

Result:

Tabs appear and operate correctly, DOM structure is unchanged

Scenario 2 - Add a tab via append of DIV, LI, and total rebuild:

Append a DIV to one of the outer container's child DIVs.  Append a LI>A to the outer container's child UL.  Call tabs( 'destroy' ) on the outer container and then call tabs() on it again.

Result:

Tabs, including new tab, appear and operate correctly, DOM structure is unchanged

Scenario 3 - Add a tab via append of DIV and call to add() ,aka tabs( 'add' )

Append a DIV to one of the outer container's child DIVs.  Call tabs( 'add' ) with ID of new DIV as second param and my text as third param

Result:

Tabs, including new tab, appear and operate correctly. But DOM structure has changed. The DIV I had appended has been moved from where I had put it in the DOM and made into a direct child of the outer container DIV.

I have prepared a js.Fiddle example to better display the problem.  Use that link to see the code and markup I am working with, and run it outside of js.Fiddle in Firefox with Firebug to see what happens with the DOM in the different versions.

This inconsistency is causing me to need to destroy and rebuild my tabs in order to add a tab as my DOM structure is very important in this case.  I would love to make use of the API and avoid an entire rebuild, and I'd love to see the API become consistent.

Thanks,

Jim

Edit 1: js.Fiddle example links added

Edit 2: Added UI version number