Trying to create an icon font awesome inside JS

Question

I am trying to create a font awesome icon next to the list item, but it keeps giving me [object HTMLElement] any Idea why ?

//The icon add classes

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 = "";
});

Thank you

tycyly · Accepted Answer · 2021-04-07 16:02:52Z

2

The right way to insert your icon is not

li.innerHTML = ...

You should use li.appendChild(icon) instead. You can do the same with a textnode for your input text :) Here's my example, hopefully this is what you wanted : https://codepen.io/LENNY74/pen/dyNVVKa

answered Apr 7, 2021 at 16:02

tycyly

3791 silver badge19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

joey Over a year ago

It worked thanks so much just was adding the class list. Add it without it worked fine. Thanks for your help man much appreciated.

Collectives™ on Stack Overflow

Trying to create an icon font awesome inside JS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related