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，或被解析为无效标记。

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

Q.AI视频生成工具

支持一分钟生成专业级短视频，多种生成方式，AI视频脚本，在线云编辑，画面自由替换，热门配音媲美真人音色，更多强大功能尽在QAI

下载

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

[% 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 允许全局属性），但语义上更常用于表单控件（