I tried creating a disembodied DOM element with jQuery (I avoid ever touching the DOM directly w/o going through jQuery, so I do treat their wrapped sets and the DOM elements underneath somewhat equivalently) and applying .tabs() to it, and only later adding the element into the DOM. The tabs kind of worked and kind of didn't. It seemed as if (from a guess) perhaps event handlers had been messed up. Clicking on a tab highlighted it but did nothing. The non-currently-selected tab content was all shown. It was a weird effect.
I changed just one thing-- I attached the disembodied element into the actual DOM tree first before calling .tabs(). Everything worked fine.
This actually fixed my immediate practical problem, because I did some more reading and realized that my whole motivation for making disembodied elements was based on a subtle misconception about how execution works in the browser between JavaScript and the DOM rendering. (I didn't realize that the renderer would not regain control until the JavaScript had finished, which makes a lot more sense in retrospect-- I'm sure a real multithreaded sort of approach would be a concurrency nightmare for browser makers...)
Anyway, that still leaves a very interesting theoretical question. What's the deal? What's the difference between the disembodied element and the attached one? How does jQuery UI play into that? I'd like to understand this stuff on a deeper level.
(I couldn't find anything with a few cursory Google searches. Not surprised, since it seems that when you correct the misconceptions I had, running jQuery UI operations on disembodied elements is pretty pointless in practice.)
Here's some code:
// doesn't work right
var disembodied = $('<div>.......html goes here....</div>');
$(disembodied).tabs();
$('div#receptacle').append( disembodied );
// does work right
var disembodied = $('<div>.......html goes here....</div>');
$('div#receptacle').append( disembodied );
$(disembodied).tabs();