在 JS 中设置版权页脚答案

【问题标题】：Setting up copyright footer in JS在 JS 中设置版权页脚
【发布时间】：2021-10-08 18:32:35
【问题描述】：

我正在尝试使用 JS 设置 Font Awesome 页脚，以便可以将其添加到页脚，但无法添加，因为它显示为 [object HTMLElement] 2020 - 2021。我已经导入了 Font Awesome 的脚本，但它不起作用。

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>

【问题讨论】：

因为你不能同时添加一个DOM元素和一个字符串......你应该追加元素，而不是在文本节点中设置它

标签： javascript font-awesome-5

【解决方案1】：

您需要附加元素，而不是将其作为文本添加到文本节点。您还将错误的类添加到 i 元素。

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

&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/&gt;

【讨论】：

非常感谢