Вернуться к уроку

createTextNode vs innerHTML

важность: 5

Есть пустой узел DOM elem.

Одинаковый ли результат дадут эти скрипты?

Первый:

elem.appendChild(document.createTextNode(text));

Второй:

elem.innerHTML = text;

Если нет – дайте пример значения text, для которого результат разный.

Результат выполнения может быть разный: innerHTML вставит именно HTML, а createTextNode интерпретирует теги как текст.

Запустите следующие примеры, чтобы увидеть разницу:

  • createTextNode создает текст „<b>текст</b>“:

    <div id="elem"></div>
    <script>
      var text = '<b>текст</b>';
    
      elem.appendChild(document.createTextNode(text));
    </script>
  • innerHTML присваивает HTML <b>текст</b>:

    <div id="elem"></div>
    <script>
      var text = '<b>текст</b>';
    
      elem.innerHTML = text;
    </script>