Alpine JS x-text and x-html binding Example

May 12, 2021 . Admin

Hi Dev,

Today, I will discuss about that how to work x-text and x-html in alpine JS.

Using the x-html directive, we can integrate some dynamic HTML inside any element.

x-html

works similarly to x-text, but instead of setting the innerText, it sets the value of the innerHTML of an element.

you can also use this example in your php laravel alpine js project.

Now, let’s started with bellow example, I will give you simple x-text and x-html using alpine js you can see on below example code. you can simply copy and check that.

You can visually perceive from the code bellow that we inject a dynamic listed item inside of the div element.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
	<style type="text/css">
		body{
			padding: 50px;
			background-color: #f7fcff;
		}
	</style>

</head>
<body>

<div x-data="{ 
		name: 'Paresh',
		body: '<ul><li>PHP</li><li>Laravel</li><li>Vue</li></ul>' 
	}">
	<div x-text="name"></div>
	<div x-html="body"></div>
</div>

</body>
</html>

I Hope It Will Help You..

#Alpine JS

You might also like...