CODEWITHSUNDEEP
javascripthtmljquerythymeleaf
user8145390
user8145390

Reputation:

Insert Thymeleaf HTML with JavaScript jquery

I am trying to insert HTML code with JavaScript, but the Browser does not show Thymeleaf rendered

$('<span [[$ th:text#{some.property.key}]]  id="counter" class="UI-modern"> 
   </span>').insertAfter("#article");

HTML code

<p id="article">Example text</p>

The key some.property.key is the property. In Thymeleaf it would look like this:

<span th:text="#{some.property.key}" id="counter" class="UI-modern">
</span>

I would like to write the above code with JavaScript jquery insertAfter() below the id "article"

Upvotes: 0

Views: 833

Answers (2)

Metroids
Metroids

Reputation: 20477

Intead of trying to use Thymeleaf HTML attributes in JavaScript, you can use JavaScript inlining and build your HTML that way. For example:

<script th:inline="javascript">
  let text = /*[[#{some.property.key}]]*/ "";
  $('<span id="counter" class="UI-modern"></span>').text(text).insertAfter("#article");
</script>

Upvotes: 1

Chris Thompson
Chris Thompson

Reputation: 11

Thymeleaf does not work on .js files It is not clear why you can't just rebder this element using Thymeleaf like the example you gave. You can give that span an ID and then reference it with JS

Upvotes: 1

Related Questions