اذهب إلى المحتوى
  • 0

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

أبي عبد الرحمان نزار

السؤال

Recommended Posts

  • 0

@oubai nezar

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

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

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

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

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

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

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

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

whats-the-difference-between-async-vs-defer-attributes.jpg.d5c55f9868ab9e49817c07f7be9b49f0.jpg

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...