Javascript 在另一个div中动态添加和更新div

我正在尝试在这个div中添加一个div，它将填充我的进度条

    <div class="progress">
    </div>

我尝试使用的javascript是

function moveProgressBar(state) {
    let elem = document.getElementsByClassName("progress");
    let prog = state.count - 1;
    let value = ((prog / state.total) * 100) + '%';
    elem.innerHTML = '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=value>';
}

功能移动进度条（状态）{
让elem=document.getElementsByClassName（“progress”）；
设prog=state.count-1；
让值=（（程序/状态总计）*100）+'%'；
elem.innerHTML=''；
}

总体目标是创建一个div和一个子div，其样式值由moveProgressBar函数填充

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style=value>
    </div>
</div>

函数

getElementsByClassName

返回一个元素数组，因此您要做的是

document.getElementsByClassName（“progress”）[0]

获取第一个元素

getElementsByClassName

返回所提供类中所有元素的名称。您可能希望对所有此类

.progress

es执行该操作

[].slice.call(elem).forEach(function (progBar) { ... } );

// [].slice.call to convert the HTML collection to a JavaScript array,
// upon which .forEach can be used.
//
// Other option would be to use a simple for loop to iterate through elem.
for(let i = 0; i < elem.length; i++) {
    let progBar = elem[i];
    ...
}

---

如果脚本是javascript，不要使用jQuery标记。编辑：为什么不使用？这是一种非常昂贵的方法。使用

元素并在

moveProgressBar（）

中更新其值，而不是在每次状态更改时从DOM获取元素。