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

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

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

и он отобразит значок «время» на странице: отобразится значок

Но теперь я хочу добавить значок в DOM с помощью метода appendChild(). Код такой:

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 равен "&#xe192;", а его innerHTML равен "&amp;#xe192;";

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


javascript dom icon-fonts innerhtml
person sputnik    schedule 22.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

person Daniel Beck    schedule 22.05.2018
comment
Большое спасибо, Даниэль! Решение работает! Но у меня все еще есть вопрос: это единственный способ? Потому что innerHTML может потребовать слишком много памяти, если у меня есть больше значков для добавления в DOM. (хотя для одного и того же значка Я могу использовать метод cloneNode().) - person sputnik; 22.05.2018
comment
Это преждевременная оптимизация. Если вы не имеете дело с десятками тысяч вставок innerHTML, это вообще не должно быть проблемой. - person Daniel Beck; 22.05.2018
comment
Нет проблемы! Это разумный вопрос; Я добавил тест производительности и немного пояснений к ответу. - person Daniel Beck; 22.05.2018