createTextNode vs innerHTML vs textContent

我們有一個空的 DOM 元素 elem 和一個字串 text。

下列哪 3 個指令會執行完全相同的動作？

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>