前陣子公司的行銷跟新的媒體合作，說是要我們做一個 banner 的圖片放在網頁上面，我想大部分的廣告媒體都是利用 iframe 的方式來嵌入html，也就只是一般的廣告素材方式，沒想到這次的規格卻是沒有html，只能給對方媒體一支 .js 的檔案，然後動態產生連結的圖片上去，聽完無言．到底是從哪裡搞來這麼奇怪的媒體管道，沒辦法只好土炮用 JS 的方式來動態新增 <a> 標籤還有 img 標籤。
其實就是這樣而已，很簡單～
const aTag = document.createElement('a');
const imgTag = document.createElement('img');
aTag.setAttribute('href', '點擊要轉跳的網址');
aTag.setAttribute('target', '_blank');
imgTag.setAttribute('src', '圖片網址連結');
aTag.appendChild(imgTag);
document.querySelector("body").appendChild(aTag);接下來我們就來細講裡面的 API 的部分，首先是 document.createElement
一般在寫網頁的時候其實會很少有這種不能寫 html 的情況，所以一般的網頁前端工程師會很少碰到這個 API，document.createElement 就是透過JS 的方式來產生 html 節點，我們可以透過這個 JS 的方式來操作這個節點然後丟到瀏覽器給他選染，只不過他是透過 JS 的方式來操作的，而不是原來的html 直接被瀏覽器渲染出來
再來我們有了 html 節點後需要設定它的attribute (屬性)，可以透過 setAttribute 的方式來設定，最後我們都設定好了所有屬性後我就把 img給 appendChild (放入)到 a 標籤裡面，最後我們取得 body 把 a 標籤整個丟到 body 上面，就大功告成了！
appendChild 與 innerHTML
需求的確是完成了，不過透過 JS 的方式去新增 DOM 元素的做法你會說也可以把DOM包成字串在 innerHTML 吐出來就好，也是一種做法。
document.querySelector("body").innerHTML = "<h1>我全都要</h1>";雖然可以透過 innerHTML 來產生 DOM 元素，但是也有一個問題…
就是透過 innerHTML 的話，會把原本畫面上的內容都給清空後再吐新的DOM上去，這樣會有問題，我們必須要讓原本的東西存在但是同時也新增內容上去，所以只能透過 appendChild 的方法來實作，appendChild 跟 innerHTML 有個地方不太一樣，就是只能傳入節點，而且不能傳入字串，所以我們一定要透過 document.createElement 來新增 DOM 節點。
const h1 = document.createElement('h1');
const txt = document.createTextNode('我全都要');
h1.appendChild(txt);
document.querySelector("body").appendChild(h1);只是這樣的做法同學們就會覺得很麻煩XD
封裝共用
為了可以不要每次都寫這麼多重複的 code ，所以我們要來封裝一下，讓我們可以重複的調用它。
在這邊我建立了一個 class 來包裝，我們來看看如何調用它
const h1 = new creEle('h1');
h1.setText('我全都要');
document.querySelector("body").appendChild(h1.el)我們來看一個實際演示
這種做法老實說一般的 web 需求會比較少接觸到，不過多少可以了解一下這種作法，遇到特殊需求話可以參考看看。
最後
我有開設一個youtube的頻道，每個月不定時週六或日晚上直播跟技術或是經驗相關的分享，有興趣的朋友歡迎追蹤訂閱＋小鈴鐺。
工商時間
線上課程 — 職人必修的 RWD 網頁入門班
線上課程 — JavaScript ＆ TweenMax 動態特效速成實戰
線上課程 — 超越入門！Webpack 前端自動化開發
線上課程 — 現代 JavaScript 職人之路｜入門篇
線上課程 — 現代 JavaScript 職人之路｜中階實戰篇
