Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

назад до уроку

createTextNode проти innerHTML проти textContent

важливість: 5

У нас є пустий DOM-елемент elem та рядок text.

Які з цих трьох команд виконають одну й ту ж дію?

  1. elem.append(document.createTextNode(text))
  2. elem.innerHTML = text
  3. elem.textContent = text

Відповідь: 1 та 3.

Результатом обох команд буде text доданий до elem «як текст».

Приклад:

<div id="elem1"></div> <div id="elem2"></div> <div id="elem3"></div> <script> let text = '<b>text</b>'; elem1.append(document.createTextNode(text)); elem2.innerHTML = text; elem3.textContent = text; </script>