مشكلة في إضافة عنصر html باستخدام js

@oubai nezar

تخبرك الرسالة أنه لا يمكنك قراءة الـ appendChild لعنصر من النوع null.

وهذا يعني أنه هنالك مشكلة في احضار العنصر contentainer,

تأكد من ان عنصر الـ html الذي تحاول الوصول إليه يملك id بالاسم content كما يظهر في الصورة الخاصة بك.

غالباً سيكون هنالك خطأ املائي في الكلمة content أو انك استخدمت الـ class بدلاً من الـ id.

هنالك احتمال ثالث، وهو أنك تقوم بتحميل كود الـ js قبل أن تقوم بتحميل كود الـ html، وهذا يحدث عندما تضع العنصر script في بداية الكود، والصحيح ان يكون العنصر script هو اخر عنصر في الـ body.

في حال لم تستطع حل المشكلة باستخدام النصائح السابقة، قم بمشاركة المجلد الحاوي على المشروع بالكامل.

شكرا لك أخي لقد انحلت المشكلة و السبب هو أنني وضعت script في بداية الكود

عليك بتحميل السكريبت بشكل Deferred حيث سيتم الإنتظار لحين تحميل الـ DOM  بشكل كامل، ثم سيتم تشغيل السكريبت مما يعني أن العناصر ستكون موجودة داخل الـ DOM، وذلك باستخدام خاصية defer كالتالي:

<script src="index.js" defer></script>

وأيضًا هناك خاصية باسم async ويتم تنفيذ السكريبت بشكل موازي (غير متزامن)، وهذا يعني أنه يتم تنفيذ السكريبت بمجرد تحميله دون أن يتوقف تنفيذ العناصر الأخرى في الصفحة عن العمل، أي تنفيذ السكريبت في الوقت الذي يتوفر فيه.

وانتبه إلى أن تنفيذ السكريبتات بشكل موازي يمكن أن يؤدي إلى ترتيب تنفيذ غير متسلسل للسكريبتات إذا كانت معتمدة على بعضها البعض.

وبالطريقة العادية لاستخدام الوسم <script>، يتم تشغيل السكريبت فور تحميله، ويتوقف تنفيذ عناصر HTML الأخرى في الصفحة حتى يتم تنفيذ السكريبت بالكامل، وقد يتسبب في تأخير تجهيز وعرض المحتوى الأساسي للمستخدمين.

 ومن المهم ملاحظة أن تنفيذ السكريبتات بشكل مؤازر يمكن أن يؤدي إلى ترتيب تنفيذ غير متسلسل للسكريبتات إذا كانت معتمدة على بعضها البعض.

أما defer فيتم تأجيل تنفيذ السكريبت حتى بعد تحميل صفحة الويب بالكامل، وتنفذ السكريبتات بترتيب الظهور في الصفحة بعد العناصر الأخرى، مما يسمح بتنفيذ السكريبت بعد استكمال تنفيذ الصفحة، ويضمن ذلك أن جميع العناصر الأخرى متاحة وجاهزة للاستخدام.

فإذا كان لديك سكريبت يتطلب الوصول إلى DOM (نموذج الكائنات القابلة للوصول) أو العناصر الأخرى في الصفحة، فيفضل استخدام defer لضمان توافر هذه العناصر قبل تنفيذ السكريبت.