blob: 43a519e1357687a670be40b3a2ad6e71f33bb22d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
---
order: 7
title: html
---
# x-html
`x-html` sets the "innerHTML" property of an element to the result of a given expression.
> ⚠️ Only use on trusted content and never on user-provided content. ⚠️
> Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.
Here's a basic example of using `x-html` to display a user's username.
```alpine
<div x-data="{ username: '<strong>calebporzio</strong>' }">
Username: <span x-html="username"></span>
</div>
```
<!-- START_VERBATIM -->
<div class="demo">
<div x-data="{ username: '<strong>calebporzio</strong>' }">
Username: <span x-html="username"></span>
</div>
</div>
<!-- END_VERBATIM -->
Now the `<span>` tag's inner HTML will be set to "<strong>calebporzio</strong>".
|