I found this random code snippet that creates progress bar with async behaviour and I would like to know why cloneNode web api was used here. From mdn document, it basically clone the node and creates exact same node with attributes and id. But I would like to why clonedProgress which is cloneNode version of progressBar had to be used to create progress bar in this code. Why progressBar variable doesn't work? https://codesandbox.io/s/immutable-browser-46gtcd?file=/src/index.js
let btn = document.querySelector("button");
let progressBar = document.querySelector(".progress");
let promise = Promise.resolve();
btn.addEventListener("click", () => {
let clonedProgress = progressBar.cloneNode(true);
clonedProgress.style.display = "block";
promise = promise.then(
() =>
new Promise((resolve) => {
setTimeout(() => {
clonedProgress.querySelector(".bar").classList.add("loading");
setTimeout(() => {
resolve();
}, 2000);
}, 0);
})
);
document.body.appendChild(clonedProgress);
});.progress {
height: 20px;
border: 1px solid;
width: 500px;
margin: 20px 0;
background-color: grey;
border-radius: 5px;
}
.bar {
width: 0px;
height: 100%;
background-color: red;
transition: width 2s ease-in 0s;
}
.loading {
width: 100%;
}<div id="app"></div>
<button id="addBtn">add+</button>
<div class="progress" style="display: none;">
<div class="bar"></div>
</div>