使用JavaScript配置含Font Awesome版权图标的页脚出现异常问题求助

嘿，我来帮你搞定这个页脚的问题！你看到的「[object HTMLElement]」是因为直接把DOM元素和字符串拼接导致的，另外Font Awesome的类名添加方式也有点小问题，咱们一步步修正：

问题分析 #

• 错误1：DOM元素与字符串直接拼接：你尝试把创建的<i>元素和字符串一起传给document.createTextNode()，但createTextNode只能处理纯文本，DOM元素会被转换成它的字符串表示「[object HTMLElement]」。
• 错误2：Font Awesome类名添加错误：fas.fa-copyright是CSS选择器的写法，不是添加类名的正确方式，应该分开添加fas和fa-copyright两个类。

修正后的代码 #

document.body.onload = footer;
function footer() {
 // 创建footer元素
 const footerDiv = document.createElement("footer");
 footerDiv.classList.add("footer");

 // 获取当前年份
 const currentYear = new Date().getFullYear();

 // 创建Font Awesome版权图标
 const copyrightIcon = document.createElement("i");
 // 正确添加Font Awesome类名
 copyrightIcon.classList.add("fas", "fa-copyright");

 // 创建年份文本节点
 const yearText = document.createTextNode(` 2020 - ${currentYear}`);

 // 把图标和文本依次添加到footer里
 footerDiv.appendChild(copyrightIcon);
 footerDiv.appendChild(yearText);

 // 将footer插入到页面指定位置
 const targetDiv = document.getElementById("div");
 document.body.insertBefore(footerDiv, targetDiv);
}

关键修改点说明 #

1. 拆分DOM元素与文本的拼接：不再试图把图标元素和字符串合并成一个文本节点，而是分别创建图标和文本，再依次追加到footer容器中。
2. 修正Font Awesome类名：用classList.add("fas", "fa-copyright")替代错误的fas.fa-copyright，这样Font Awesome才能正确识别图标类。
3. 优化字符串拼接：用模板字符串${currentYear}让代码更简洁易读。

你的Font Awesome脚本引入是正确的（defer属性确保脚本在DOM加载完成后执行），所以修正以上两点后，页脚就能正常显示「© 2020 - 2021」（用Font Awesome图标替代版权符号）啦！

内容的提问来源于stack exchange，提问作者DosbrandingCreative001