如何使用JavaScript DOM插入带role="progressbar"属性的进度条HTML结构

有两种常用的实现方案，可根据实际使用场景选择：

方案1：直接拼接HTML字符串插入 #

如果不需要单独操作进度条的其他属性，直接用innerHTML或者insertAdjacentHTML插入完整的HTML字符串即可，role属性会被DOM自动解析识别：

// 直接插入到body示例
document.body.innerHTML = `
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
`;

// 追加到指定容器、不覆盖原有内容示例
const container = document.querySelector('#你的容器选择器');
container.insertAdjacentHTML('beforeend', `
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
`);

方案2：分步创建DOM元素动态设置属性 #

如果需要动态修改属性值（比如后续要更新进度数值），可以单独创建元素后用setAttribute方法添加role和ARIA相关属性：

// 创建外层progress容器
const progressWrap = document.createElement('div');
progressWrap.className = 'progress';

// 创建进度条元素
const progressBar = document.createElement('div');
progressBar.className = 'progress-bar';
// 添加role属性
progressBar.setAttribute('role', 'progressbar');
// 设置样式和ARIA属性
progressBar.style.width = '75%';
progressBar.setAttribute('aria-valuenow', '75');
progressBar.setAttribute('aria-valuemin', '0');
progressBar.setAttribute('aria-valuemax', '100');

// 组装DOM结构后插入到页面
progressWrap.appendChild(progressBar);
document.body.appendChild(progressWrap);

注意：role属于HTML标准全局属性，直接用setAttribute设置即可，不需要特殊处理，设置后屏幕阅读器等辅助设备可以正常识别该元素的语义。

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