انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #3 من درس: دوال الإنشاء المتقدمة في كائن المستند DOM

Creating Elements and Text Nodes تكامل createElement والعقد النصية

أتقن دوال الإنشاء المتقدمة في كائن المستند لتجميع العناصر بسرعة عبر createDocumentFragment وبناء العقد النصية والتعليقات وإطلاق الأحداث المخصصة CustomEvent.
2 صفوف تعليمية
جافا سكريبت
3,159 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يمنحك الجمع بين document.createElement() وdocument.createTextNode() قدرة دقيقة على بناء عناصر مركبة — مثل زر يضم أيقونة يتبعها نص متغير — دون مسح الأيقونة المجاورة كما يفعل textContent ودون مخاطر حقن الوسوم في innerHTML.

ولأن المتصفح يتعامل مع العقدة النصية بوصفها حروفاً صرفة فقط، يُعرض أي نص يشبه الوسوم مثل <img onerror=1> كما هو بأمان تام دون أدنى تنفيذ برمجي.

الصف 2 كود برمجي
JavaScript 
const badge = document.createElement('span');
badge.setAttribute('class', 'tag');
const safeText = document.createTextNode('<img onerror=1> Safe!');
badge.appendChild(safeText);
document.getElementById('host').appendChild(badge);
جرّب بنفسك

جميع فقرات هذا الدرس (دوال الإنشاء المتقدمة في كائن المستند DOM)