I am trying to setup Font Awesome footer with JS so I can add it to the footer, but unable to, because it shows up as [object HTMLElement] 2020 - 2021. I have imported the script for Font Awesome but its not working.
I would like the footer to show as © 2020 - 2021 but to use the Font Awesome logo instead.
document.body.onload = footer;
function footer() {
// create a new div element
const footerDiv = document.createElement("footer");
// assign it a class
footerDiv.classList.add("footer");
// gets the current date
const copyright = new Date().getFullYear();
// gets the copyright symbol
const favicon = document.createElement("i");
favicon.classList.add("fas.fa-copyright");
const completedFooter = document.createTextNode(favicon +
" 2020 " + "- " + copyright);
// add the text node to the newly created div
footerDiv.appendChild(completedFooter);
// add the newly created element and its content into the DOM
const newDiv = document.getElementById("div");
document.body.insertBefore(footerDiv, newDiv);
}<head>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"> </script>
</head>You need to append the element, not add it as text to a text node. You are also adding the classes wrong to the i element.
document.body.onload = footer;
function footer() {
// create a new div element
const footerDiv = document.createElement("footer");
// assign it a class
footerDiv.classList.add("footer");
// gets the current date
const copyright = new Date().getFullYear();
// gets the copyright symbol
const favicon = document.createElement("i");
favicon.classList.add("fas", "fa-copyright");
const text = document.createTextNode(" 2020 " + "- " + copyright);
// add the text node to the newly created div
footerDiv.appendChild(favicon);
footerDiv.appendChild(text);
// add the newly created element and its content into the DOM
const newDiv = document.getElementById("div");
document.body.insertBefore(footerDiv, newDiv);
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>