[第七週] 改變元素

改變元素的 CSS

element.style.要更改的東西

例如：

改變元素的 Class

增加 class

1. 先在 style標籤裡寫一個 active 的 class
2. 把 active 這個class 加進去指定的元素裡
   element.classList.add('active')
   

移除 class

element.classList.remove('class 名稱')

element.classList.toggle('class 名稱')
toggle就像一個開關，原本 off 會變 on，原本 on 會變 off

改變內容

• innerText
  選取到標籤內的所有文字
  
  也可以用 innerText 改變本來的內容
  
• innerHTML
  選取到標籤內的文字及 Html 標籤，但不包括自己本身的標籤
  
• outerHTML
  選取到標籤內的文字及 Html 標籤，包括自己本身的標籤
  
  用 outerHTML 改變本來的內容
  

刪除與插入元素

• 刪除元素 removeChild
  先找到要刪除元素的 parent，就是找到他的上一層元素，再執行removeChild
  

• 新增元素 appendChild
  先新增元素 .createElement('欲新增的標籤')
  再執行 appendChild
  使用 innerText 可以改變新增元素的內容
  
  如果不想新增元素，只是想新增文字，可以用.createTextNode