前言

昨天認識了如何選取節點，今天來了解一下該如何針對節點進行新增及修改吧！

新增節點

const div = document.createElement('div')

新增節點的語法相較之下比較簡單，只要將想新增的節點存在一個變數裡，接著只要運用下面的方法將節點放入欲加入的區塊就完成了。

const parent = document.querySelector('.container')

// 將新增的div節點放入成為parent節點子元素中的最後一個
parent.appendChild(div)

// 將新增的div節點放於parent節點中第一個子元素的前面
parent.insertBefore(div, parent.firstChild)

// 將新增的div節點取代parent節點中最後一個子元素
parent.replaceChild(div, parent.lastChild)

修改節點

我們可以針對節點內容進行修改調整，主要可以運用以下語法修改元素內容：

// 可以解析html標籤
div.innerHTML = `<h1>title</h1>`

// 不會解析html標籤，只會處理文字
div.innerText = "title"
div.textContent = "title"

可能比較常會遇到的問題是到底三個該使用哪個才好呢?假如是可以使用textContent就能解決的事情，可以考慮優先使用它就好，雖然textContent和innerText呈現出來的結果似乎雷同，但innerText取得的內容其實是將CSS調整過後的樣式也一起取出，並非單純只是實際節點中的文字內容，而innerHTML會直接將HTML格式一起取出，如果只是在需要使用到字串的情況下，可以將它的使用順序擺到最後面(不然有種打初級關卡派出呂布暴力掃蕩的感覺)。

刪除節點

刪除節點的語法也較為簡單，主要比較在使用的有兩種方法：

// 藉由父節點來刪除子節點
parent.removeChild(div)

// 直接將該節點進行移除
div.remove()

此外，除了以上幾種針對節點的操作外，還可以直接操作節點的CSS，幾個常用的語法如下：

// 查看目前節點所有class名稱，回傳類似陣列的清單
div.classList

// 可以加入一個或多個css
div.classList.add("active")

// 刪除樣式
div.classList.remove("active")

// 只有一個樣式的情況下也可以直接寫入
div.className = className

// 直接運用style來修改節點屬性
div.style.backgroundColor = "#fff"

從上面語法可以發現，CSS屬性的寫法在JS中會以camelCase的命名風格來呈現，一般來說還是會先將CSS文件寫好再透過classList的方式來新增或移除等方法進行修改樣式。