Код шрифта значка (например, ) недопустим при добавлении его в DOM с помощью textContent - PullRequest
Новая
       49

Код шрифта значка (например, ) недопустим при добавлении его в DOM с помощью textContent

0 голосов
/ 22 мая 2018

Я использую Google iconfonts на своем веб-сайте.
Обычно код в HTML выглядит следующим образом: 

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

, и на странице будет отображаться значок времени: значок будет отображаться

Но теперь я хочу добавить значок в DOM, используя appendChild () 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) в консоли broswer, его textContent равен "&#xe192;", а его innerHTML равен "&amp;#xe192;";

Итак, как я могу получить значок, когда я динамически добавляю значок в DOM.

1 Ответ

0 голосов
/ 22 мая 2018

Используйте 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 на значительно быстрее , чем innerHTML, потому что браузер не должен анализировать ввод, поэтому он неплохая идея предпочесть textContent, когда это возможно - но в этом случае вам действительно нужно, чтобы этот разбор выполнялся, поэтому необходимо принять этот небольшой удар по производительности.В большинстве реальных ситуаций разница незначительна, вам придется выполнить десятки тысяч вставок DOM, прежде чем разница станет заметной.

...