---
name: "up:fragment:inserted"
area: "API"
kind: "DOM event"
parent: "up.fragment module"
url: "https://unpoly.com/api/up:fragment:inserted"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.fragment module](https://unpoly.com/api/up.fragment.md)</nav>

# up:fragment:inserted

When a page fragment has been [inserted or updated](https://unpoly.com/api/up.render.md), this event is [emitted](https://unpoly.com/api/up.emit.md) on the new element.

When an element with children is inserted, `up:fragment:inserted` is only emitted once for the entire new subtree.

If you're looking to run code when a new fragment matches a selector, use [`up.compiler()`](https://unpoly.com/api/up.compiler.md).
This event is emitted after compilation.

<nav aria-label="Guides">

- [Learn: Render lifecycle](https://unpoly.com/learn/render-lifecycle.md)

</nav>

## Example {#example}

```js
up.on('up:fragment:inserted', function(event, fragment) {
  console.log("Looks like we have a new %o!", fragment)
})
```

---

## Event properties {#properties}

### event.target {#event.target}

(required)

The fragment that has been inserted or updated.

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

### event.layer {#event.layer}

(required)

The [layer](https://unpoly.com/api/up.layer.md) of the new fragment.

Type: [up.Layer](https://unpoly.com/api/up.Layer.md)

### event.ok {#event.ok}

(required)

Whether the element was loaded from a [successful response](https://unpoly.com/learn/error-responses.md#fail-options).

Type: boolean

### event.revalidating {#event.revalidating}

(required)

Whether the element was reloaded for the purpose of [cache revalidation](https://unpoly.com/learn/caching.md#revalidation).

Type: boolean