Combining multiple ULs into one UL

Question

How can I combine multiple `ul`s into one `ul`? For example how can i Combine the following. ```

``` To something like this ```

```

Accepted Answer

The great thing about `.append()` and `.appendTo()` is that they will move existing DOM elements instead of copying them as you might expect:

```
$('ul').children('li').appendTo('ul:first'); // move all LIs to the first UL
$('ul').not(':first').remove(); // delete the extra ULs
```

Customize the `'ul'` selector as needed; I recommend using a common class instead of a general tag selector.

http://jsfiddle.net/j76Lu/

Slightly more optimized (thanks, adeneo):

```
$('ul').not(':first').remove().children('li').appendTo('ul:first');
```

​ http://jsfiddle.net/j76Lu/1/

or even better:

```
$('ul:gt(0)').remove().children('li').appendTo('ul:eq(0)');
```

​ http://jsfiddle.net/j76Lu/2/

Solution