使用 textContent 将图标字体代码（如 ）添加到 DOM 时无效

Question

我在我的网站上使用 google iconfonts。
通常，HTML中的代码是这样的：

<i class="material-icons">&#xE87C;</i>

它会在页面上显示一个 'time' 图标： the icon will display

但现在我想通过使用 appendChild() 添加一个图标到 DOM method.the 代码是：

var my_element = document.getElementById("icon-div");

// create a i tag
var i = document.createElement("i");
i.className = "material-icons";
i.textContent = "&#xe192;";

// append the tag to my_element
my_element.appendChild(i);

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>

  <body>
    <!--it should be-->
    <i class="material-icons">&#xe192;</i>

    <!--add it by using appendChild method-->
    <div id="icon-div">
    </div>
  </body>
</html>

当我在浏览器控制台中查看<i>（div中的那个）时，它的textContent是""，它的innerHTML是"&#xe192;";

那么动态添加图标到DOM时如何获取图标呢

Answer 1

使用innerHTML代替textContent:

var my_element = document.getElementById("icon-div");

// create a i tag
var i = document.createElement("i");
i.className = "material-icons";
i.innerHTML = "&#xe192;";

// append the tag to my_element
my_element.appendChild(i);

<html>
  <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  </head>

  <body>
    <!--it should be-->
    <i class="material-icons">&#xe192;</i>

    <!--add it by using appendChild method-->
    <div id="icon-div">
    </div>
  </body>
</html>

textContent 假设您正在插入文本；所以它会转义输入，这样它就不会显示为 HTML。您希望它显示为 HTML.

关于性能：textContent比innerHTMLsignificantly faster，因为浏览器不需要解析输入，所以更喜欢textContent 在可能的情况下——但在这种情况下，您实际上需要进行解析，因此有必要对性能造成很小的影响。在大多数现实世界的情况下，差异可以忽略不计，您必须进行数万次 DOM 插入，差异才会变得明显。

使用 textContent 将图标字体代码（如 ）添加到 DOM 时无效

icon font code (like )is not valid when add it to DOM by using textContent

javascript

dom

innerhtml

icon-fonts

使用 textContent 将图标字体代码（如 ）添加到 DOM 时无效

icon font code (like &#xe192;)is not valid when add it to DOM by using textContent

javascript

dom

innerhtml

icon-fonts

icon font code (like )is not valid when add it to DOM by using textContent