How to add <a> into <li> using thymeleaf each loop

I have a todo list and I want to show each item in a "li" tag. And in this tag, i also want to add a link X to be able to delete the item. But I got an error:

org.xml.sax.SAXParseException: The value of attribute "th:text" associated with an element type "li" must not contain the '<' character.

Here is the code that got the error:

<li th:each="todoitem : ${todolist}" th:text="${todoitem.text} + <a href='#' class='close' aria-hidden='true'>&times;</a>" th:attr="data-value=${todoitem.id}" ></li>

I also tried like this, also did not work:

<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>&times;</a></li>

The code that I am trying to generate is like this:

<li data-value="0">text of todo list <a href="#" class="close" aria-hidden="true">×</a></li>

So how can I make a loop that can also add the link into the li tag?

Solution

One option is to use a <span> to render the text.

So from your second attempt, i.e.

<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>&times;</a></li>

move the th:text into a new <span>

<li th:each="todoitem : ${todolist}" th:attr="data-value=${todoitem.id}">
    <span th:text="${todoitem.text}" th:remove="tag"></span>
    <a href='#' class='close' aria-hidden='true'>&times;</a>
</li>

You could also use th:inline="text" as explained here.