如何将字体强大的CSS嵌入DOM脚本(javascript）

How To Embed font-awesome CSS into DOM Scripting (javascript)?

本文关键字：DOM 嵌入 脚本 javascript CSS 字体      更新时间：2023-09-26

这里，javascript使用DOM SCRIPTING生成浏览器显示的最后一行："No Finds"。假设我想把字体真棒（font真棒）中的一个"标志性人物"并置，例如他们的笑脸，就在单词"Finds"后面。

我试着楔入这根绳子：

<i class = 'fa fa-smile-o'></i>

就在单词"No Finds"之后，如下所示，但这不起作用。

这是有效的代码：

newrow = makeEle({ tag: "tr", dom: [makeEle({ tag: "td", id: "tdWhere", dom: [document.createTextNode("No Finds")] })] });

这是我的补充-失败了：

newrow = makeEle({ tag: "tr", dom: [makeEle({ tag: "td", id: "tdWhere", dom: [document.createTextNode("No Finds<i class = 'fa fa-smile-o'></i>")] })] });

如何让CSS（字体很棒）在这里产生影响？我真的不明白javascript和CSS是如何接口的，所以我可能在问不可能的事情。

通过以下正确编码解决了上述问题（感谢Michal）：

newrow = makeEle({ tag: "tr", dom: [ makeEle({ tag: "td", dom: [document.createTextNode(" No Finds "), makeEle({ tag: "i", className: "fa fa-frown-o" }) ] }) ] });

将类设置为fa fa-smile-o。

var i = document.createElement("i");
i.className = 'fa fa-smile-o';

由于字体出色的标记是HTML，而不仅仅是文本，因此document.createTextNode函数无法工作。因此，您必须使用makeEle来创建i标记节点。以下是代码的样子（为了可读性，我将其拆分为多行）：

newrow = makeEle({
  tag: "tr",
  dom: [
    makeEle({
      tag: "td",
      id: "tdWhere",
      dom: [
        document.createTextNode("No Finds"),
        makeEle({
          tag: "i",
          className: "fa fa-smile-o"
        })
      ]
    }),
  ]
});

请注意td在dom数组内的额外makeEle调用。

有关jsfiddle 的演示，请参阅此处

相关文章：