将 Thymeleaf HTML 插入 JavaScript jquery

Question

我正在尝试使用 JavaScript 插入 HTML 代码，但浏览器不显示呈现的 Thymeleaf

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

HTML代码

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

关键 some.property.key 是属性。在 Thymeleaf 中，它看起来像这样：

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

我想用 JavaScript jquery insertAfter() 在 id “article”下面编写上面的代码

Answer 1

Thymeleaf 不适用于 .js 文件目前尚不清楚为什么你不能像你给出的例子那样使用 Thymeleaf 重新定义这个元素。你可以给那个跨度一个 ID，然后用 JS

引用它

Answer 2

与其尝试在 JavaScript 中使用 Thymeleaf HTML 属性，不如使用 JavaScript inlining 并以此方式构建 HTML。例如：

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

将 Thymeleaf HTML 插入 JavaScript jquery

Insert Thymeleaf HTML with JavaScript jquery

javascript

html

jquery

thymeleaf