如何基于后端传入值动态修改HTML元素的ID？

当然可以实现！你完全可以通过定义变量的方式来动态修改这些节点的ID，下面给你两种最常用的方案，适配不同的开发场景：

1. 原生JavaScript动态处理（前端运行时修改） #

如果你的页面已经渲染完成，需要在前端根据后端传入的变量更新ID，或者动态创建带指定ID的元素，可以这么做：

修改已有元素的ID #

先通过其他选择器（比如类名、父元素选择器）定位到目标元素，再用变量拼接成新ID赋值：

// 假设后端传入的节点标识存在这个变量里
var nodePrefix = "node13";

// 定位到大气压力对应的p元素，修改其ID
const pressurePara = document.querySelector('.container#c0 .info p');
pressurePara.id = `${nodePrefix}/pressure`;

// 同理修改湿度的p元素ID
const humidityPara = document.querySelector('.container#c0 .story .info p');
humidityPara.id = `${nodePrefix}/humidity`;

动态创建元素时设置ID #

如果是从头创建DOM元素，可以直接在创建过程中用变量设置ID：

var nodePrefix = "node13";

// 创建容器元素
const container = document.createElement('div');
container.className = 'container';
container.id = 'c1';

// 创建image模块
const imageDiv = document.createElement('div');
imageDiv.className = 'image';
imageDiv.id = 'i1';

// 创建info模块和内部元素
const infoDiv = document.createElement('div');
infoDiv.className = 'info';

const heading = document.createElement('h3');
const link = document.createElement('a');
link.href = 'voltage.html';
link.target = '_blank';
link.textContent = 'Battery Voltage';
heading.appendChild(link);

const voltagePara = document.createElement('p');
// 用变量拼接ID
voltagePara.id = `${nodePrefix}/voltage`;
voltagePara.textContent = 'Parameters use to measure Battery Voltage are : ';

// 组装元素并添加到页面
infoDiv.appendChild(heading);
infoDiv.appendChild(voltagePara);
imageDiv.appendChild(infoDiv);
container.appendChild(imageDiv);
document.body.appendChild(container);

2. 后端模板引擎渲染（推荐后端传值场景） #

如果你的页面是后端渲染的（比如Node.js的EJS、Python的Jinja2、Java的Thymeleaf等），可以直接在模板中使用后端传入的变量生成ID，这样页面加载时就已经是正确的ID，不需要前端额外修改：

以EJS模板为例：

<% // 这个变量由后端传入 %>
<% const nodePrefix = "node13"; %>

<div class="container" id="c0">
  <div class="image" id="i0">
    <div class="info">
      <h3><a href="pressure.html" target="_blank">Atmospheric Pressure </a></h3>
      <p id="<%= nodePrefix %>/pressure"></p>
    </div>
  </div>
  <div class="story" id="s0">
    <div class="info">
      <h3><a href="humidity.html" target="_blank">Humidity</a></h3>
      <p id="<%= nodePrefix %>/humidity"> value </p>
    </div>
  </div>
</div>
<div class="container" id="c1">
  <div class="image" id="i1">
    <div class="info">
      <h3><a href="voltage.html" target="_blank">Battery Voltage</a></h3>
      <p id="<%= nodePrefix %>/voltage"> Parameters use to measure Battery Voltage are : </p>
    </div>
  </div>
</div>

小提示 #

虽然HTML允许ID中包含/，但这种符号可能会在使用CSS选择器或JavaScript获取元素时带来转义的麻烦，建议尽量用下划线（_）或连字符（-）代替，比如把node13/pressure改成node13_pressure，这样后续开发会更顺畅。

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