Add Tab To Specific Index

This example shows how jQuery UI developers can programatically add and remove tabs from the tabs widget. What if you need to add the new tab to a specific position, say, the first position, rather than just appending it to the list? Here's a modified version of the tabs manipulation demo that puts the newly-created tab in a specific position.

The key change to the demo is this code:

tabs.find( ".ui-tabs-nav li:nth-child(" + index + ")" )
    .before( li );

This is different from original approach of simply appending the item. Here, the index represents the 1-based position of the new tab. We then find that element and insert the new tab before it. The order in which the new tab content div is inserted doesn't matter it's looked up by ID.