如何通过JavaScript/jQuery获取Thymeleaf动态生成ID的元素？

确认Thymeleaf的ID写法正确性 #

你当前的Thymeleaf代码是正确的：

<pre th:id="'jsonViewer-' + ${obj.id}">[[${obj.payload}]]</pre>

Thymeleaf会将其渲染为类似 <pre id="jsonViewer-123">...</pre> 的HTML（123 为 ${obj.id} 的实际值），这部分无需修改。

修正jQuery元素选择器 #

你的代码问题出在选择器的字符串拼接逻辑上，Thymeleaf的表达式需要在页面渲染阶段被替换为实际值，以下是两种可行的修正方案：

方案一：直接在选择器中嵌入Thymeleaf变量 #

将Thymeleaf变量直接写入选择器字符串，让Thymeleaf提前渲染出完整的ID选择器：

$(function() {
   function formatJson() {
       var element = $("#jsonViewer-${obj.id}");
       var obj = JSON.parse(element.text());
       element.html(JSON.stringify(obj, undefined, 2));
   }
   formatJson();
});

方案二：先存储动态ID再拼接选择器 #

先通过Thymeleaf将obj.id渲染为JS变量，再拼接成选择器，可读性更强：

$(function() {
   var targetObjId = "${obj.id}";
   function formatJson() {
       var element = $("#jsonViewer-" + targetObjId);
       var obj = JSON.parse(element.text());
       element.html(JSON.stringify(obj, undefined, 2));
   }
   formatJson();
});

额外注意事项 #

• 确保[[${obj.payload}]]渲染后是合法的JSON字符串，否则JSON.parse()会抛出解析错误
• 若页面存在多个此类JSON预览元素，建议使用类名+data-*属性批量处理，例如给pre标签添加class="json-viewer"和data-object-id="${obj.id}"，再通过类选择器遍历操作，避免重复编写代码

内容的提问来源于stack exchange，提问作者PriyanWL2022