如何从 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 而不是 innerText 您想要更改 html 而不是元素文本。

<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>`
  
};

如何从 JS 文件动态添加超赞字体图标？

How to add font awesome icon dynamically from JS file?

javascript

dom

font-awesome

非工作代码

工作代码