CODEWITHSUNDEEP
javascriptfont-awesome
joey
joey

Reputation: 49

Trying to create an icon font awesome inside JS

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

Upvotes: 0

Views: 439

Answers (1)

tycyly
tycyly

Reputation: 379

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

Upvotes: 2

Related Questions