尝试在 JS 中创建一个很棒的图标字体

Question

我正在尝试在列表项旁边创建一个很棒的字体图标，但它一直给我 [object HTMLElement] 任何想法，为什么？

//图标添加类

const fas = document.querySelector(".fas");
const ul = document.querySelector("ul");
const input = document.querySelector("input");

//Grab the input
fas.addEventListener("click", () => {
  const li = document.createElement("li");
  const inputValue = input.value;
  const icon = document.createElement("i");
  icon.innerHTML = "hey";
  li.innerHTML = inputValue + icon;

  console.log(icon);
  if (inputValue == "") {
    return;
  }
  ul.appendChild(li);
  input.value = "";
});

谢谢

Answer 1

插入图标的正确方法不是

li.innerHTML = ...

您应该改用 li.appendChild(icon)。您可以对输入文本的文本节点执行相同的操作 :) 这是我的示例，希望这是您想要的：https://codepen.io/LENNY74/pen/dyNVVKa

尝试在 JS 中创建一个很棒的图标字体

Trying to create an icon font awesome inside JS

javascript

font-awesome