HTML 中正确使用模板变量为元素 name 属性赋值的规范写法

你提供的代码片段中存在一个关键语法疏漏：

<dd name=[% field %] class="float-right">[% order.$field %]</dd>

此处 name=[% field %] 缺少引号，导致生成的 HTML 类似于：

<dd name=id class="float-right">123</dd> <dd name=updatedt class="float-right">2024-05-20 14:30:00</dd>

而根据 HTML 规范，未加引号的属性值仅允许包含字母、数字、下划线、短横线及英文句点（即 NAME Token），且不能以数字开头。像 updatedt 虽看似合法，但一旦 field 值含空格、特殊字符（如 last-check-dt）或纯数字（如 123），浏览器会截断或解析失败，更严重的是：jquery 的属性选择器 $(“[name=’updatedt’]”) 将完全匹配不到该元素——因为实际 dom 中该属性可能被忽略、归入 undefined，或被解析为无效标记。

立即学习“前端免费学习笔记（深入）”；

✅ 正确写法是始终为属性值添加英文双引号（推荐）或单引号：

[% FOREACH field IN ['id','type','updatedt','lastcheckdt'] %]     <div class="row col-md-3 col-sm-6">         <dl class="details-dl">             <label>[% field %]</label>             <div class="details-dg">                 <dd name="[% field %]" class="float-right">[% order.$field %]</dd>             </div>         </dl>     </div> [% END %]

渲染后将得到标准、可被 js 可靠选取的 HTML：

<dd name="updatedt" class="float-right">2024-05-20 14:30:00</dd> <dd name="lastcheckdt" class="float-right">2024-05-19 09:15:22</dd>

此时，JavaScript 即可安全操作：

// ✅ 正确：双引号包裹的属性选择器 let dt_formatted = convertDateFormat("[% order.updatedt %]"); $("[name='updatedt']").text(dt_formatted); // 注意：dd 元素用 .text() 而非 .val()  // 若需批量处理所有动态字段，可进一步泛化： $("[name]").each(function() {     const name = $(this).attr("name");     if (name === "updatedt" || name === "lastcheckdt") {         const rawValue = $(this).text();         $(this).text(convertDateFormat(rawValue));     } });

⚠️ 注意事项：

• name 属性在
  标签中虽属合法（html5 允许全局属性），但语义上更常用于表单控件（