我如何使用香草JS创建引导进度栏，如果不是香草的话

Question

有此代码

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  progressBarElemdiv class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

从这里https://getbootstrap.com/docs/4.3/components/progress/

我只想使用js创建相同的progressBar

我开始

progressBarElem = document.createElement("div");
progressBarElem.className = "progress-bar"
progressBarElem.setAttribute("role","progressbar")
progressBarElem.setAttribute("aria-valuenow",70)
progressBarElem.style.width = 50 + '%';
progressBarElem.setAttribute("aria-valuemin",0)
progressBarElem.setAttribute("aria-valuemax",100)
progressBarElem.setAttribute("aria-valuemax",100)
progressBarElem.style.width = 200
progressBarElem.style.height = 50
progressBarElem.textContent = "Sss"
document.querySelector(".body").appendChild(progressBarElem)
console.log(progressBarElem);

但是我仍然需要设置很多属性，并且需要一些transion，它变得非常混乱，有没有更快的方法？

Answer 1

可能是这个吗？

= HTML =

<div id="Hidden-Elements" style="display: none">
  <div class="progress-bar" role="progressbar" style="width: 50%" 
       aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

= JS =

const progressBarElem = document.querySelector('#Hidden-Elements div.progress-bar').cloneNode(true)

document.querySelector(".body").appendChild(progressBarElem)