建立新元素，係使用 document.createElement()，建立後須被渲染render才會顯現。比如透過 appendChild()、insertBefore()、replaceChild()等。
舉例來說，有一個網頁原始碼段落如下。
<body>
<div>Hello</div>
<div>Hi</div>
<div>There</div>
</body>
我們要用JavaScript加入兩個div，在body之內往後加。
const p = document.createElement("div")
p.textContent = "Hi"
const q = document.createElement("div")
p.textContent = "There"
const b = document.createElement("body")
b.appendChild(p)
b.appendChild(q)
最後網頁會印出
Hello
Hi
There
依此類推 insertBefore() 可將新節點插入制定節點之前。
建立新文字節點，係使用 document.createtTextNode()，建立後須被渲染render才會顯現。比如透過 appendChild()、insertBefore()、replaceChild()等。原理同上。
與前述插入節點原理相同，我們還能編輯、刪除節點內容。
取代（編輯）節˙點內容，係使用 replaceChild()。舉例來說，有一個清單的網頁原始碼段落如下。
<ul id="DNU">
<li>Tokyo</li>
<li>Kyoto</li>
<li>Tohoku</li>
<li>Nagoya</li>
<li>TokyoTech</li>
</body>
接下來，依序取得最外層的（容器）、內層的（元素）、建立節點、取代節點內容。
let DNU = document.getElementById('DNU')
let oldDNU = document.querySelectorAll('li')
let newDNU = document.createElement('li')
let newUniv = document.createTextNode("Osaka, TDMU, Tsukuba")
newDNU.appendChild(newUniv)
DNU.replaceChild(newDNU, oldDNU)
就這樣，新的國立大學法人取代舊名單了。
取代（編輯）節˙點內容，係使用 removeChild() 刪除指定節點。舉例來說，有一個清單的網頁原始碼段落如下。
<ul id="DNU">
<li>Tokyo</li>
<li>Kyoto</li>
<li>Tohoku</li>
<li>Nagoya</li>
<li>TokyoTech</li>
</body>
接下來，依序取得最外層的（容器）、內層的（元素）、刪除節點內容。
let DNU = document.getElementById('DNU')
let removeDNU = document.querySelectorAll('li')[5]
DNU.replaceChild(removeDNU)
就這樣，名單中第5項的TokyoTech被移除了。
本來，網頁樣式多是由CSS主管的。但在一些特殊情況下，可能需要JavaScript去觸發/寫入CSS樣式。我們可以做到：
有關情形並不多見，意者可從以上主題更加深入。
iThome鐵人賽
看影片追技術