Table of Contents

• 創建元素
• 插入元素
• 移除元素
• 替換元素
• References

今天要找新增、插入、移除、替換元素的方法。

創建元素

我想要在網頁中新增一個煮火鍋的參賽選手名單列表，首先產生我需要的標題與表單元素內容，這時可以使用document.createElement()的方法增加元素，再利用document.createTextNode或者textContent新增文字。

const h1 = document.createElement('h1');
const ul = document.createElement('ul');
h1.textContent = `contestantNumber: 1`;
const li1 = document.createElement('li');
const li2 = document.createElement('li');
const li3 = document.createElement('li');
//也可以用document.createTextNode()方法先組成節點
li1.textContent = `hotpotFlavor: Spicy Sichuan`;
li2.textContent = `hotpotIngredients:Beef slices, Tofu, Enoki mushrooms, Napa cabbage`;
li3.textContent = `beveragePairing: Jasmine tea`

//上面已經完成新增元素跟文字，但新增<li>標籤的重複性有點高，所以接下來會使用下面的函式
function addNewLi(text){
   const li = document.createElement('li');
   li.textContent = text;
   //或者
   // const newtext = document.createTextNode(text);
 }

//產生新的<li>標籤
addNewLi(`hotpotFlavor: Spicy Sichuan`);
addNewLi(`hotpotIngredients:Beef slices, Tofu, Enoki mushrooms, Napa cabbage`);
addNewLi(`beveragePairing: Jasmine tea`);

插入元素

前面做了一些步驟創建元素跟文字，但畫面中還沒有出現相關內容，是因為接下來要確定這些內容該放在哪些位子，再透過方法插入元素。

在執行之前，先來談插入節點的幾個方法。
Element.prepend()/Element.append()：在指定的元素內，為子層的前後新增元素節點或文字節點，prepend為子層前面，append是子層後面。
Element.before()/Element.after()：在指定的元素前後新增元素節點或文字節點，before插在前面，after則是插在後面。

剛才有一個<h1>標籤，我希望他後面接著<ul>，並在<ul>依序新增<li>。

const h1 = document.createElement('h1');
const ul = document.createElement('ul');
h1.textContent = `contestantNumber: 1`;
//在body的子層加上<h1>標籤，但因為現在body是空白的，所以使用prepend或append都可以
document.body.prepend(h1)
//讓ul排在h1後面
h1.after(ul)

function addNewLi(text){
   const li = document.createElement('li');
   li.textContent = text;
    //希望li可以依照執行函式的順序新增，所以使用append()
   ul.append(li)
   //或者
   // const newtext = document.createTextNode(text);
 }

addNewLi(`hotpotFlavor: Spicy Sichuan`);
addNewLi(`hotpotIngredients:Beef slices, Tofu, Enoki mushrooms, Napa cabbage`);
addNewLi(`beveragePairing: Jasmine tea`);

這時網頁就會有下面的內容：

那麽上面的插入方法可以依序寫多個想要插入的元素，例如：

const li1 = document.createElement('li');
const li2 = document.createElement('li');
const li3 = document.createElement('li');
//也可以用document.createTextNode()方法先組成節點
li1.textContent = `hotpotFlavor: Spicy Sichuan`;
li2.textContent = `hotpotIngredients:Beef slices, Tofu, Enoki mushrooms, Napa cabbage`;
li3.textContent = `beveragePairing: Jasmine tea`
ul.append(li1,li2,li3)

另外有個方法是Node.appendChild()，它跟Element.append()很像，但差在Node.appendChild()只能放一個參數，後面可以依狀況決定要放入多少內容。

接下來講另一組插入方法：
insertAdjacentElement()/insertAdjacentHTML()/insertAdjacentText()。先講它們共同的部份，他們可以指定某個位子插入元素，方法的參數會放兩個，第一個參數是位置，第二個參數是要插入的內容。

1. 位置：
   位置有固定的四個值：beforebegin/afterbegin/beforeend/afterend，這些是字串，記得要加單引號或者雙引號。以下是各個位置的說明，被指定的元素會以「目標元素」代稱：

beforebegin：目標元素之前
afterbegin：目標元素的第一個孩子前面
beforeend：目標元素的最後的孩子後面
afterend：目標元素之後

2. 可插入內容：
   insertAdjacentElement()：元素。
   insertAdjacentHTML()：可被解析的HTML或XML的文本。
   insertAdjacentText()：文本節點。

拿insertAdjacentHTML()對先前的程式碼示範：

const h1 = document.createElement('h1');
const ul = document.createElement('ul');
h1.textContent = `contestantNumber: 1`;
document.body.prepend(h1)
h1.after(ul)
ul.insertAdjacentHTML('afterbegin',`<li name='text'>hotpotFlavor: Spicy Sichuan</li>
<li name='text'>hotpotIngredients:Beef slices, Tofu, Enoki mushrooms, Napa cabbage</li>
<li name='text'>    beveragePairing: Jasmine tea
</li>`)

移除元素

移除節點的方法分別有兩個：Element.remove()、removeChild()，這兩個方法雖然說是移除節點，但實際上只是把畫面中的內容移除，節點內容本身被保留著。

要使用Element.remove()，一樣要先使用interface方法存取到節點，比方說createElement或queryselector的方法，再移除節點。

之前在insertAdjacentHTML()的示範中，最後再加上一行移除ul的第一個小孩：

ul.firstChild.remove();

hotpotFlavor: Spicy Sichuan這一行文字就消失了。

如果我是用removeChild()，一樣可以移除節點，比方說我的<li>是用文字節點新增的。

//一樣新增元素與節點的前製作業
const h1 = document.createElement('h1');
const ul = document.createElement('ul');
h1.textContent = `contestantNumber: 1`;
const li1 = document.createElement('li');
const li2 = document.createElement('li');
const li3 = document.createElement('li');
const liText1 = document.createTextNode(`hotpotFlavor: Spicy Sichuan`)
const liText2 = document.createTextNode(`hotpotIngredients:Beef slices, Tofu, Enoki mushrooms, Napa cabbage`)
const liText3 = document.createTextNode(`beveragePairing: Jasmine tea`)

//插入元素
document.body.prepend(h1)
h1.after(ul)

function addNewLi(li,text){
  li.append(text);
  ul.append(li);
}
addNewLi(li1,liText1)
addNewLi(li2,liText2)
addNewLi(li3,liText3)

//從第三個li移除文字
li3.removeChild(liText3);
console.log(liText3);//#text

替換元素

Element.replaceWith()：可以用某個或多個節點與文字替換指定的節點，不放內容進去也會清空。

原本的內容是這樣，我利用replaceWith()去改第三個<li>的內容。

const li = document.createElement('li');
ul.lastChild.replaceWith(li);
ul.lastChild.textContent = "extraDish: Crispy fried wontons";
ul.lastChild.style.color = "blue";

Element.replaceChildren()：把父代的子代全部清空，再傳新的多個節點或文字進去。

innerHTML跟textContent很相似，但前者會把內容解析成HTML，textContent就只是一段字串。兩者都會清空指定元素的後代，並傳入新內容取代原本內容，儘管直接新增整組建構好的內容很方便，但也帶來網站的安全風險，不建議使用。

References

• MDN

1. Document: createElement() method
2. Document: createTextNode() method
3. Node: textContent property
4. Node: appendChild() method
5. Element: append() method
6. Element: prepend() method
7. Element: before() method
8. Element: after() method
9. Element: insertAdjacentElement() method
10. Element: insertAdjacentHTML() method
11. Element: insertAdjacentText() method
12. Element: remove() method
13. Node: removeChild() method