---
name: "up.Preview.prototype.swapContent"
area: "API"
kind: "Instance method"
parent: "up.Preview class"
visibility: "experimental"
url: "https://unpoly.com/api/up.Preview.prototype.swapContent"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.Preview class](https://unpoly.com/api/up.Preview.md)</nav>

# up.Preview.prototype.swapContent([element], newContent)

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

Visually replaces the children of an element with new content for the duration of this preview.

The visual effect is achieved by [hiding existing children](https://unpoly.com/api/up.Preview.prototype.hideContent.md) and [inserting a new element](https://unpoly.com/api/up.Preview.prototype.insert.md) as the only visible child. When the preview [ends](https://unpoly.com/learn/previews.md#ending) all changes will be reverted.

> #### Tip
>
> To visually remove elements during a preview, prefer hiding over detaching. See [Prefer additive changes](https://unpoly.com/learn/previews.md#prefer-additive-changes).

## Example {#example}

This preview visually replaces the children of the [targeted fragment](https://unpoly.com/api/up.Preview.prototype.fragment.md) with a `.spinner` element:

```js
up.preview('spinner', function(preview) {
  preview.swapContent('<span class="spinner">Please wait...</span>')
})
```

To swap the content of another element, pass it as a first reference argument:

```js
up.preview('spinner', function(preview) {
  preview.swapContent('body', '<span class="spinner">Please wait...</span>')
})
```

---

## Parameters {#parameters}

### [element=this.fragment] {#element}

(optional)

The element or selector to visually swap children of.

If omitted, the children of the [targeted fragment](https://unpoly.com/api/up.Preview.prototype.fragment.md) will be swapped.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | string

### newContent {#newContent}

(required)

The new content to insert.

You may pass an [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element), a CSS selector or a snippet of HTML.

If the given element is a [template](https://unpoly.com/learn/templates.md), it will be cloned before insertion.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | string