隨著開始學習前端技術，我也是自然的接觸到了html、CSS、JavaScript這些在網頁前端中最基礎的東西。我也在其中遇到了很多有意思的問題。在一開始我製作的網頁都是用html先把結構全部搭建好了，之後再使用CSS來設定設定html元素的樣式屬性，最後使用JavaScript來給其增加一些動態的效果，比如點選一個按鈕會改變元素的一些樣式什麼的~(～￣▽￣)～。

但是這是就遇到了問題，我們雖然把網頁的前端結構，樣式寫出來了，但是如果我們要改動網頁內部的內容，或是在網頁中以同樣的形式來增加一些內容的時候，我們就會感到異常的繁瑣。如果我們能過找出一種方法能夠根據已有的資訊來動態載入網頁的結構，甚至動態載入網頁元素的樣式那就好了。而能夠在網頁上提供動態操作html元素，CSS樣式的無疑就是JavaScript了，他的DOM（文件物件模型（Document Object Model），簡稱DOM）能夠方便的操作html元素，改變CSS樣式。

為了動態搭建一個網頁，我們首先要把大致的結構搭建出來，這是網頁中不因內容而被改變的東西。這一部分直接寫在顯示地寫在html文件之中就行了。接著是樣式，我們可以在一開始就根據我們的頁面屬性就定義好，也可以使用下面的方法來動態的插入一個樣式表，這裡使用了DOM的sheet屬性：

如果有要因為插入內容而動態生成的樣式可以使用（元素）.style.(樣式) = “樣式屬性”的方法來改變某個元素的樣式。

然後就到了我們根據要填入的內容來使用javascript加入html元素了html的檔案解析的順序就是從上到下的所以我們可以吧js程式碼直接插入到body中去，等一個元素載入完了之後，直接執行js程式碼，然後根據內容來動態的生成html元素。也可以在整個網頁載入完了之後，在執行js程式碼根據插入內容生成html元素並插入。

我選擇了第二種方法，因為第二種方法把js程式碼從html程式碼中分離了出來，這樣更好編寫和修改。

在一個已經搭建好的結構中插入程式碼有兩個方法：

1.使用元素的innerHtml屬性直接把想要插入的內容賦給這個屬性就可以了

2.可以使用加入位元組點的方法：先用document.createElement("#")來建立一個節點，在通過DOM來獲取其父節點，在通過父節點的

element.appendChild(para)方法來加入子節點。