如何将超棒的字体 CSS 嵌入到 DOM 脚本 (javascript) 中？

Question

这里，javascript，使用 DOM 脚本，为浏览器显示生成最后一行："No Finds"。假设我想并置一个来自 font-awesome (fontawesome) 的 "iconic character"，例如，他们的笑脸，紧跟在单词 "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（font-awesome）在这里承受影响？我真的不明白 javascript 和 CSS 是如何交互的，所以我可能会问一些不可能的事情。

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

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

Answer 1

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

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

Answer 2

由于 font-awesome 标记是 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"
        })
      ]
    }),
  ]
});

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

见here for a demo on jsfiddle

如何将超棒的字体 CSS 嵌入到 DOM 脚本 (javascript) 中？

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

javascript

css

dom

font-awesome