+++
title = "multi-swap"
+++
This extension allows you to swap multiple elements marked with the `id` attribute from the HTML response. You can also choose for each element which [swap method](@/docs.md#swapping) should be used.
Multi-swap can help in cases where OOB ([Out of Band Swaps](@/docs.md#oob_swaps)) is not enough for you. OOB requires HTML tags marked with `hx-swap-oob` attributes to be at the TOP level of HTML, which significantly limited its use. With OOB, it's impossible to swap multiple elements arbitrarily placed and nested in the DOM tree.
It is a very powerful tool in conjunction with `hx-boost` and `preload` extension.
## Install
```html
```
## Usage
1. Set `hx-ext="multi-swap"` attribute on ``, on some parent element, or on each action element that should trigger an action (typically anchors or buttons).
2. On your action elements set `hx-swap="multi:ID-SELECTORS"`, e.g. `hx-swap="multi:#id1,#id2:outerHTML,#id3:afterend"`.
3. If you're not using e.g. `hx-get` to enable HTMX behavior, set `hx-boost="true"` on your action elements, or on some parent element, so that all elements inherit the hx-boost setting.
Selectors must be separated by a comma (without surrounding spaces) and a colon with the desired swap method can optionally be placed after the selector. Default swap method is `innerHTML`.
```html
Click to swap #id1 and #id2, extend #id3 content and delete #id4 element
Old 1 content
Old 2 content
Old 3 content
Old 4 content
```
**Real world example with preloading**
The use case below shows how to ensure that only the `#submenu` and `#content` elements are redrawn when the main menu items are clicked. Thanks to the combination with the preload extension, the page, including its images, is preloaded on `mouseover` event.
```html
...