如何将JavaScript变量插入HTML div，替换data-total属性和对应文本

• 第一种document.getElementById("chart1").innerHTML =score写法会直接覆盖#chart1下的所有子元素内容，原本的两个span会被直接替换为score的纯文本，自然无法实现对应效果
• 直接在HTML属性中写JS代码的方式不会被自动执行，只会被识别为普通字符串存储在属性中，没有实际作用

你需要分别修改3处对应的值：div的data-total属性、进度条span的宽度样式、文本span的内容，完整实现代码如下：
原有HTML结构不需要修改，保持原有即可：

<div id="chart1" class="bar-chart secondary" data-total="42" animated>
  <span class="bar-chart--inner" style="width:42%;"></span>
  <span class="bar-chart--text">42% </span>
</div>

新增如下JS代码即可：

// 此处替换为你实际的score变量赋值逻辑
var score = 68;

// 获取图表外层元素
const chartWrapper = document.getElementById('chart1');
// 修改data-total属性值
chartWrapper.dataset.total = score;
// 修改进度条宽度
const barInner = chartWrapper.querySelector('.bar-chart--inner');
barInner.style.width = `${score}%`;
// 修改展示文本
const barText = chartWrapper.querySelector('.bar-chart--text');
barText.textContent = `${score}%`;

如果需要页面加载完成后自动执行，可以把JS代码包裹在DOM加载完成的事件回调中：

document.addEventListener('DOMContentLoaded', function() {
  var score = 68; // 你的score变量
  const chartWrapper = document.getElementById('chart1');
  chartWrapper.dataset.total = score;
  const barInner = chartWrapper.querySelector('.bar-chart--inner');
  barInner.style.width = `${score}%`;
  const barText = chartWrapper.querySelector('.bar-chart--text');
  barText.textContent = `${score}%`;
})

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