[WebAPIs] 淺談 JavaScript DOM Manipulation (2): 建立與新增

在上一篇文章提到，選取 DOM 元素後，可以做許多操作，這篇想談談如何在選取元素後，以該元素為基礎新增 DOM 元素。

因目前工作會需要操作網頁的 Google 廣告單元，就是新聞網或各種網誌中，以各種方式出現的令人煩躁的廣告😂，各種方式例如：出現在網頁底部(錨底廣告)、佔滿螢幕畫面(蓋板廣告)或是出現在文章段落中間。
如果我們要讓廣告出現，會需要先選取現有網站的 DOM 元素，再以此為基準去新增 DOM 元素，並在該元素內放入廣告內容。
除此之外，React 也是抓取網頁根元素，再將網頁內容渲染進根元素內，所以新增、修改 DOM 元素在網頁應用十分重要🙌

以下列出我目前常用的方法：

1. 建立元素與相關屬性#

createElement

let element = document.createElement(tagName[, options]);
此方法可依據指定的 HTML 標籤建立元素，tagName 填入字串，如 "div", "h1", "button"…等標籤。options 則是選填，可傳遞自定義元件標籤的名稱，但現在還是實驗性質，只有部分瀏覽器支援，更多說明可看 MDN 。
setAttribute

el.setAttribute(name, value)
設定元素的屬性，name 和 value 都傳入字串。
例如可設定 id 屬性：element.setAttribute('id', 'monica-element');
className

el.className = '…'
可設定元素 class，透過空格可一次加入多 class。
例如可設定背景藍色、文字白色的 class：element.className = 'bg-blue text-white';

2. 將元素加入現有 DOM element#

appendChild

targetElement.appendChild(childElement)
在目標元素下新增一個子元素，append 會將子元素加在目標元素的最後面。
假設目標元素(ul)的結構如下，則 appendChild 會將子元素加到第 2 個 li 之後：

<ul>
  <li></li>
  <li></li>
  <! - appendChild 新增的元素 -->
</ul>

append

targetElement.append(param1, param2, ...)
概念與 appendChild 類似，可將子元素加到目標元素的最後面。與 appendChild 的差異在於 append 可一次新增多個節點或字串，且可新增字串也可新增 Node 物件，但 appendChild 只能新增 Node 物件。
prepend

targetElement.prepend(param1, param2, …)
將元素插入到目標元素第一個子元素之前，也就是 prepend 參數內的 element 會成為目標元素內的第一個元素。
after

targetElement.after(param1, param2, …)
將元素加在目標元素的後一個元素。
before

targetElement.before(param1, param2, …)
將元素加在目標元素的前一個元素。

文字說明可能不清楚，簡單做了一張示意圖解釋這些方法的差異：

實作案例#

學會這些方法後，來試著實作看看吧!
如果現在有個網頁長這樣：

假設現在想在文章第二段下方新增一個"Hello! this is my insert element!"的區塊，可分為三個步驟：

選取目標元素的 DOM element：
const targetEl = document.querySelectorAll(‘p’)[1];

創建要新增的 DOM element (這裡有用我另外載入的 tailwindcss 樣式)

const newEl = document.createElement('p');
newEl.innerText = "Hello! this is my insert element!";
newEl.className = "text-white text-center bg-black p-2";

將新元素插入到目標元素下方
targetEl.after(newEl);

就可看到元素被插入成功囉!

也可右鍵檢查目前網頁結構，來確認元素是否有如預期地插入：

完整程式碼連結請見 CodePen。

Reference:#

如有任何問題歡迎聯絡、不吝指教✍️