動態添加和更新另一個div內的div

Question

我正在嘗試在此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>';
}

總體目標是擁有一個看起來像div的div和一個sub div，其樣式值由moveProgressBar函數填充。

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

Answer 1

函數getElementsByClassName返回一個元素數組，因此您要做的是document.getElementsByClassName("progress")[0]以獲取第一個元素。

Answer 2

getElementsByClassName返回具有提供的類的所有元素的HTML集合 。 您可能想對所有此類.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];
    ...
}

 function moveProgressBar(state) { let elem = document.getElementsByClassName("progress"); let prog = state.count - 1; let value = ((prog / state.total) * 100) + '%'; [].slice.call(elem).forEach(function(progressBar) { progressBar.innerHTML = '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:' + value + '">'; }); } // Sample run var currCount = 0; setInterval(function() { moveProgressBar({ count: (++currCount % 42), total: 42 }); }, 250); 

 .progress { border: 1px #AAA solid; } .progress-bar { height: 15px; background-color: #0E0; } 

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

請注意，您可能只想更改現有.progress-bar的寬度，而不是每次要更新.progress es值時都創建一個新的.progress-bar元素。 對於定義的每個進度條，您可能還想分別存儲當前值（ aria-valuenow ）。