From the course: HTMX with Thymeleaf in Spring Boot

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

hx-swap: beforeend, afterend, and deleting elements

hx-swap: beforeend, afterend, and deleting elements - Spring Boot Tutorial

From the course: HTMX with Thymeleaf in Spring Boot

Start my 1-month free trial Buy for my team

hx-swap: beforeend, afterend, and deleting elements

“

- [Instructor] Let's open 03_05_begin/records-management in IntelliJ and go again back to the editable-email-form to demonstrate the beforeend hx-swap value and the afterend hx-swap value. Previously, we had used the afterbegin and beforebegin, so now it's time to talk about the beforeend hx-swap value for a moment. beforeend will basically cause the content to be appended after the last child inside the target. Looking at the hx-swap attribute on the editable-email-form, it is currently set to afterbegin, which will put the new email inside the target email-list container at the beginning, prepending this to the beginning of the DOM. So let's go ahead and change this to beforeend. And restart the application by running it from the terminal, mvn clean install spring-boot:run. In the browser, let's log in. And navigate to the person full details. And click Add Email. I'll select Work. And type an email. And hit Enter. Let's go ahead and right-click on the email we created and inspect…

Contents