نريد أن نتيح هذا المشروع المفتوح المصدر إلى كل الناس حول العالم. من فضلك ساعدنا على ترجمة محتوى هذه السلسله للغة التى تعرفها.
خريطة الدورة التعليمية
الرجوع الي الدرس
هذة المادة العلميه متاحه فقط باللغات الأتيه: English, Español, Français, Italiano, 日本語, 한국어, Русский, Türkçe, Українська, Oʻzbek, 简体中文. من فضلك, ساعدنا قم بالترجمه إلى عربي.

createTextNode vs innerHTML vs textContent

الأهمية: 5

We have an empty DOM element elem and a string text.

Which of these 3 commands will do exactly the same?

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

Answer: 1 and 3.

Both commands result in adding the text “as text” into the elem.

Here’s an example:

<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>