ما هو الفرق بين خاصيتين createTextNode و innerHTML

Mohammed Hhhh · 17 مايو 2022

ما الفرق بين هاتين الخاصيتين

في JS

document.createTextNode(‘hello world’);
//!!! and 
document.innerHtml(‘hello world’);

بلال زيادة · 17 مايو 2022

في البداية دعنا نوضح الخاصية createTextNode ، فمثلا نريد إنشاء عنصر نقوم باستخدام createElement كالتالي

// أنشئ العنصر الجديد
var newDiv = document.createElement("div");

ثم نريد إضافة محتوى لهذا العنصر عن طريق الخاصية createTextNode كالتالي

// ضَع محتوى داخل العنصر
var newContent = document.createTextNode("مرحبًا");

ثم نضيف المحتوى للعنصر المنشئ مسبقاً بهذه الطريقة

// أضف عقدة النّص إلى العنصر المُنشأ
newDiv.appendChild(newContent);

وبالتالي نفهم بأن مهمة الخاصية createTextNode مهمتها إدخال محتوى للعنصر، أما خاصية innerHtml فهذه الخاصية تستطيع من إدخال وسم HTML بداخل العنصر مثل

let div = document.createElement('div');
div.innerHTML = "<strong>Hi there!</strong> You've read

السؤال