現在在跟五倍的組員們做專案，常常會遇到從後端撈到資料的時候，要把資料塞在前端顯示。

textContent 和 innerHTML 每次我都要再多查一次 check，今天就來比較一下這三種的作法，看看這樣我會不會印象深一點，以後就不用再查（做一下夢）

textContent

可以拿到選取範圍的文字包含空格

從 Code 來看

HTML結構

<div class="box">
  <h2> 星期五</h2>
  <p> 我在家寫 code</p>
</div>

JavaScript

let txt = document.querySelector('.box')

console.log(txt.textContent)

Output

"
   星期五
   我在家寫 code
"

innerContent

單純的選取的文字

HTML結構

<div class="box">
  <h2> 星期五</h2>
  <p> 我在家寫 code</p>
</div>

JavaScript

let txt = document.querySelector('.box')

console.log(txt.innerContent)

Output

"星期五

我在家寫 code"

來比較一下，textContent 和 innerContent 的不同

可以看到 innerText 的文字長度比 texrContent 短

innerHTML

選取的文字，包含 HTML 的 tag

HTML結構

<div class="box">
  <h2> 星期五</h2>
  <p> 我在家寫 code</p>
</div>

JavaScript

let txt = document.querySelector('.box')

console.log(txt.innerHTML)

Output

"
  <h2> 星期五</h2>
  <p> 我在家寫 code</p>
"

在實作的時候，通常會搭配監聽事件來看 function 要做什麼事情。

舉個例子，
我們在聊天室時，點下 share 的 icon，我們希望在點下 share button 的瞬間，把資料抓到，讓使用填的 share form 內，我們就可以用到上面的這些方法。

首先我們要先監聽事件

document.querySelectorAll('.share-btn').forEach((e)=>{
  e.addEventListener('click', function (e) {
    let shareContent = e.target.parentNode.querySelector('.content').textContent
    let selectMessage = document.querySelector('.select-message')
    selectMessage.textContent = shareContent
  })
})

這樣就可以把我們抓到的資料，丟到我們希望他在的區塊。

學寫程式學到現在，覺得要學的東西，真的很多，但是一邊學也一邊覺得很好玩，慶幸自己沒有被氣餒打敗。

雖然寫不出很多很複雜的 code，可是慢慢會的東西越來越多的時候，還是覺得很開心。

明天見。