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

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

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

elem.append(document.createTextNode(text))
elem.innerHTML = text
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>