如何從JS文件動態添加字體真棒圖標？

Question

我正在嘗試將字體真棒圖標添加到我的問候語功能中，因此在每個問候語標題中將附加一個不同的字體真棒圖標。

我嘗試以傳統方式進行操作，但是javaScript將html打印為文本，現在標題看起來像這樣：

Good Morning<i class="fas fa-sun"></i> 

```javascript
function goodSomething() {

  let today = new Date();
  let curHr = today.getHours();

  if (curHr < 12) {
    document.getElementById('greetings').innerText = "Good Morning" + '<i class="fas fa-sun"></i>';
  } else if (curHr < 18) {
    document.getElementById('greetings').innerText = "Good Afternoon" + '<i class="fas fa-coffee"></i>';
  } else {
    document.getElementById('greetings').innerText = "Good Evening" + '<i class="fas fa-moon"></i>';
  }
};

我期望輸出：

早上好+（太陽圖標）

下午好+（咖啡圖標）

晚上好+（月亮圖標）

Answer 1

您應該使用innerHTML而不是要更改html而不是元素文本的innerText 。

<i class="fas fa-sun"></i>  //This is string representing html

以下是兩個片段，它們將顯示差異

非工作代碼

 document.getElementById("test").innerText = `<i class="fas fa-sun">` 

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <div id="test"></div> 

工作守則

 document.getElementById("test").innerHTML = `<i class="fas fa-sun">` 

 <div id="test"></div> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> 

此外，您還可以通過使用對象數組來清潔和動態化。

function goodSomething() {
  let curHr = new Date().getHours();
  const conds = [
        {cond:curHr < 12, icon:"sun", time:"Morning"},
        {cond:curHr < 18, icon:"coffee", time:"Afternoon"},
        {cond:true, icon:"moon", time:"Evening"}
  ]
  let {time,icon} = conds.find(x => x.cond);
  document.getElementById('greetings').innerHTML = `Good ${time} <i class="fas fa-${icon}"></i>`

};