---
area: "Learn"
parent: "Getting started chapter"
url: "https://unpoly.com/learn/start/elements"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [Getting started chapter](https://unpoly.com/learn/start/overview.md)</nav>

# Enhance an element

For your own JavaScript, Unpoly pairs behavior with HTML elements. Instead of running scripts once per page load, you register a _compiler_ that enhances matching elements whenever they enter the page.

## Writing a compiler {#writing-a-compiler}

Say your server renders this element:

```html
<span class="current-time"></span>
```

Register a compiler for its selector:

```js
up.compiler('.current-time', function(element) {
  element.textContent = new Date().toString()
})
```

The function is called **once for each matching element**: when the page first loads, and again whenever a fragment update inserts a `.current-time` element.

This replaces listening to `DOMContentLoaded`. Because Unpoly updates fragments, the browser keeps the same document through many navigations, and events that only fire at the initial page load would miss all content that arrives later.

<nav aria-label="Reading order">

- [Previous: Open an overlay](https://unpoly.com/learn/start/overlays.md)
- [Next: The shape of the API](https://unpoly.com/learn/start/api.md)

</nav>