Day22:給我一個節點，我可以把網頁改頭換面

「DOM API 定義了 JavaScript 存取、改變 HTML 架構、內容、樣式的方法，甚至對節點綁定的事件。」

前一篇的內容，是關於 JavaScript 如何「存取」 HTML 節點的方法；這一篇來談談 JavaScript 用甚麼方法改變 HTML 架構、內容與樣式。

JavaScript 改變 HTML 的方法有以下步驟：

• 新增元素節點或文字節點
• 利用 appendChild()、 insertBefore 或 replaceChild() 等方法將新增的元素節點與文字節點插入指定的位置。

新增元素節點或文字節點

document.createElement(tagName)

document.createElement(tagName) 可以幫我們建立一個新的元素節點，但是你利用appendChild() 等方法把它加入指定位置之後才會在網頁上顯示出來。

let newLi = document.createElement('li');

同時也可針對我們新建立的<li>，指定id及class名稱。

newLi.id = "goodNewLi";
newLi.className = "betterNewLi";

document.createTextNode()

我們也可以利用 document.createTextNode() 建立文字節點，在括號中放入想要新增的字串。跟document.createElement(tagName) 一樣，要用 appendChild() 等方法把新增的文字節點插入指定的位置後面，網頁上才會顯現出來。

let txt = document.createTextNode('string');

document.write

document.write() 應該是JavaScript 的新手最熟悉的老朋友了！

利用它不用甚麼 append 方法，馬上可以將括號中的內容輸出到網頁上，而且括號中不只可以放字串，還可以放HTML標籤。

document.write('Hollow World！')

將DOM節點新增到網頁中或是刪改節點

Node.appendChild(childNode)

Node.appendChild(childNode) 可以讓我們將新增的元素節點或文字節點新增到父容器節點的最尾端。

<ul id="fiveHero">
  <li id="firstHero">1 東邪</li>
  <li id="secondHero">2 西毒</li>
  <li id="thirdHero">3 南帝</li>
  <li id="fourthHero">4 北丐</li>  
</ul>

讓我們看看如何將 <li id="lastHero">5 中神通</li> 加入列表的最末端：

//取得父容器節點
let heros = document.getElementById('fiveHero');
//新增<li>節點
let newLi = document.createElement('li');
//指定新增節點的id名稱
newLi.id = "lastHero";
//新增文字節點
let text = document.createTextNode('5 中神通');
//將文字節點加入到新增的<li>節點中
newLi.appendChild(text);
//將新增的<li>節點加入到父容器節點中
heros.appendChild(newLi);

Node.insertBefore(newNode,refNode)

Node.insertBefore(newNode,refNode) 方法可以將新的節點 (newNode) ，插入到參考節點(refNode) 之前。

<ul id="fiveHero">
  <li>1 東邪</li>
  <li>2 西毒</li>  
  <li>4 北丐</li> 
	<li>5 中神通</li>
</ul>

//取得父容器節點
let heros = document.getElementById('fiveHero');
//建立新節點<li>
let newHero = document.createElement('li');
//建立新的文字節點
let thirdHeroTxt=document.createTextNode('3 南帝');
//將文字節點加入新建立的節點<li>
newHero.appendChild(thirdHeroTxt);
//抓取參考的節點<li id="fourthHero">4 北丐</li>
let refHero = document.querySelectorAll('li')[2];
//將新的節點<li>插到參考節點前面
heros.insertBefore(newHero,refHero);

Node.replaceChild(newChildNode,oldChildNode)

Node.replaceChild(newChildNode,oldChildNode) 可以將原本的節點及內容更換為新的節點及內容。

<div id="sword">
  <ul id="fiveHero">
    <li id="firstHero">1 東邪</li>
    <li id="secondHero">2 西毒</li>
    <li ids="thirdHero">3 南帝</li>
    <li id="fifthHero">4 北丐</li>
    <li id="lastHero">5 中神通</li>
  </ul>
</div>

//取得父容器節點
let heros = document.getElementById('fiveHero');
//建立新節點<li>
let newHero = document.createElement('li');
//建立新的文字節點
let newHeroTxt=document.createTextNode('5 中頑童');
//將文字節點加入newHero元素節點
newHero.appendChild(newHeroTxt);
//抓取參考的節點<li id="lastHero">5 中神通</li>
let oldHero = document.getElementById('lastHero');
heros.replaceChild(newHero,oldHero);

Node.removeNode(childNode)

那要如何刪除元素節點呢?利用 Node.removeNode(childNode) 就可以辦到！但是這個方法只能刪除單一網頁節點。

<ul id="fiveHero">
  <li>1 東邪</li>
  <li>2 西毒</li> 
  <li>3 南帝</li>
  <li>4 北丐</li> 
	<li>5 中神通</li>
</ul>

//取得父容器節點
let heros = document.getElementById('fiveHero');
//取得要移除的元素節點
let removeHero = document.querySelectorAll('li')[1];
//將heros裡的removeHero移除
heros.removeChild(removeHero);

以上就是改變HTML架構的方法，新增一個元素節點或文字節點，將其新增、替換原本就有的節點，或是清除本來就有的節點。