> For the complete documentation index, see [llms.txt](https://jscula.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jscula.gitbook.io/docs/manipulation/.html.md).

# .html()

`.html()` gets or sets the HTML inside an element.

***

#### Syntax

```js
element.html();
element.html(htmlString);
element.html(callback);
```

***

#### Parameters

* `htmlString` → new HTML content
* `callback` → function that receives current HTML and returns new HTML

***

#### Output

Getter:

```js
string
```

Setter:

```js
HTMLElement | NodeList | HTMLCollection
```

***

#### Example

```js
$('#message').html('<strong>Saved</strong>');
```

```js
$('#message').html(current => `${current}<span> now</span>`);
```

***

#### Use cases

Use `.html()` to:

* Render formatted status messages.
* Replace a container with generated markup.
* Append markup based on the current content.

***

#### More examples

Read the HTML from a container:

```js
const content = $('#article').html();
```

Replace a loading indicator with a result message:

```js
$('#status').html('<p class="success">Upload complete</p>');
```

Build a list from an array:

```js
const items = ['Profile', 'Settings', 'Sign out'];

$('#menu').html(items.map(item => `<li>${item}</li>`).join(''));
```

{% hint style="warning" %}
Only pass trusted content to `.html()`. Escape or sanitize user-provided values first.
{% endhint %}

***

#### Beginner Note

Use `.html()` when the content contains HTML tags.

If you only want plain text, use `.text()`.

***

#### Key Takeaway

> `.html()` is for HTML content.