用 DOM 插入或刪除元素

又是你～

重點

不論是「新增」或「刪除」，都必須透過「父元素」來操作。

換句話說就是直接對元素使用的話會出錯，請務必記住這一點。

新增元素

插到最前面 prepend

備註：如果要新增多個可以 prepand(elem1, elem2)

<div class="block">yoyoyo</div>

// 先選到要新增元素的父層
const parent = document.querySelector('.block')
// 建立新元素
const newElement = document.createElement('div')
// 寫一些文字
newElement.innerText = 'R~Lo~Ha~'
// 插到最前面
parent.prepend(newElement)

Output：

<div class="block">
  <div>R~Lo~Ha~</div>
  yoyoyo
</div>

插到最後面 appendChild

<div class="block">yoyoyo</div>

// 先選到要新增元素的父層
const parent = document.querySelector('.block')
// 建立新元素
const newElement = document.createElement('div')
// 寫一些文字
newElement.innerText = 'R~Lo~Ha~'
// 插到最後面
parent.appendChild(newElement)

Output：

<div class="block">
  yoyoyo
  <div>R~Lo~Ha~</div>
</div>

一次新增多個元素

突然發現有個 append 方法可以用：

<div class="block">
  <p>yoyoyo</p>
</div>

// 先選到要刪除元素的父層
const parent = document.querySelector('.block')
// 要新增的第一個元素
const elem1 = document.createElement('div')
elem1.innerText = 'elem1'
// 要新增的第二個元素
const elem2 = document.createElement('div')
elem2.innerText = 'elem2'
// 插入兩個元素
parent.append(elem1, elem2)

Output：

<div class="block">
  <p>yoyoyo</p>
  <div>elem1</div>
  <div>elem2</div>
</div>

插到父元素下的某個子元素前面 insertBefore

<div class="parent">
  <div class="child">child2</div>
</div>

// 建立新元素
const div = document.createElement('div')
// 新元素內容
div.innerText = 'child1'
// 把 div 插到 child 前面
document.querySelector('.parent').insertBefore(div, document.querySelector('.child'))

Output：

<div class="parent">
  <div>child1</div>
  <div class="child">child2</div>
</div>

刪除元素

方法一 removeChild

<div class="block">
  <p class="child">yoyoyo</p>
</div>

// 先選到要刪除元素的父層
const parent = document.querySelector('.block')
// 要刪除的元素
const deleteElement = document.querySelector('.child')
// 刪除子元素
parent.removeChild(deleteElement)

Output：

<div class="block"></div>

方法二 remove

<div class="block">
  <p class="child">yoyoyo</p>
</div>

JavaScript：

// 要刪除的元素
const deleteElement = document.querySelector('.child')
// 把自己刪除
deleteElement.remove()

補充－新增文字節點

如果你只想新增文字，但又不想用 innerText，因為會整筆覆寫掉。

這時候你可以改用 createTextNode 來處理：

<div class="block">yoyoyo</div>

// 先選到要新增元素的父層
const parent = document.querySelector('.block')
// 建立新文字內容
const newText = document.createTextNode('a new text')
// 插到最後面
parent.appendChild(newText)

Output：

<div class="block">yoyoyo a new text</div>