如何在JavaScript中动态设置HTML标签的上下标字符？

方法1：改用innerHTML替代textContent #

textContent会把HTML标签当作纯文本输出，所以<sup>/<sub>这类标签不会被浏览器解析。换成innerHTML就能让标签生效：

let element = document.getElementById('xxx');
// 实现上标
element.innerHTML = 'Lab<sup>2</sup>el';
// 实现下标
element.innerHTML = 'Lab<sub>2</sub>el';

方法2：用CSS自定义位置（更灵活） #

如果需要精细控制偏移量、字体大小，给目标字符套<span>，通过vertical-align属性调整：

let element = document.getElementById('xxx');
// 自定义上标效果（可调整vertical-align和font-size数值）
element.innerHTML = 'Lab<span style="vertical-align: 30%; font-size: 0.6em;">2</span>el';
// 自定义下标效果
element.innerHTML = 'Lab<span style="vertical-align: -20%; font-size: 0.6em;">2</span>el';

方法3：拼接DOM元素（更安全） #

如果内容包含用户输入，直接用innerHTML有XSS风险，可以通过创建DOM节点的方式拼接：

let element = document.getElementById('xxx');
element.textContent = ''; // 清空原有内容

// 创建文本节点和上标元素
const prefixText = document.createTextNode('Lab');
const supChar = document.createElement('sup');
supChar.textContent = '2';
const suffixText = document.createTextNode('el');

// 拼接并插入到目标元素
element.appendChild(prefixText);
element.appendChild(supChar);
element.appendChild(suffixText);

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