今天來說說用javaScript來生成html的例如button等。

先來說說為甚麼會需要這樣使用呢?
你可能會想就直接打在html檔，需要就display:block，不需要就display:none，不就好了?
確實這也是一種方法，但你有想過如果這些物件，其實不會很常出現又或是，剛載入畫面時根本不會用到，那樣是不是就會浪費時間去載入這些東西?

所以在某些時候採用需要用到再讓javaScript生成就好的方式，畢竟現場生成也就幾ms，如果使用者近來之後都沒使用到這個區塊那便是賺到，就算使用到也還好。

注意事項

上面說到生成有ms時間，所以如果你生成的物件有要套上javaScript可能會出現物件還沒出來所以抓不到的問題，所以如果報錯可以試者給他延遲一下唷。

生成與組裝

生成前你要先抓你要放的區塊地方，最後會用推入的方式把整個區塊結合再一起
var frameDiv = document.getElementById('frame');

那麼接下來就可以開始寫你要放進去的東西了
var 名稱 = document.createElement('div');，createElement('xxx')就是生成標籤

再來是class和id
名稱.className = 'border-3 border-secondary border';
名稱.id='';

設定寬高
名稱.style.width = '300px';
名稱.style.height='200px';

基本就這樣，javaScript可以設定很多很多html的東西甚至input/button的type/value等等都有，看需求去設定就好

當你把你要的東西都設定好之後就是組裝囉
frameDiv.appendChild(名稱);，用appendChild，他會把(名稱)放入frameDiv。

範例

下面為你要放進去的區塊

<div class="d-flex justify-content-center mt-5" id="frame">
      ...      
</div>

推入一個紅色區塊，灰色框

<script>
            function box() {
                var frame = document.getElementById("frame")
                var box = document.createElement("div")
                box.className = "border-3 border-secondary border"
                box.style.width = "300px"
                box.style.height = "200px"
                box.style.backgroundColor = "red"
                frame.appendChild(box)
            }
            box()
</script>

今天就這樣啦謝謝觀看~~