سيصف هذا البرنامج التعليمي طرق كتابة كود HTML ديناميكيًا باستخدام JavaScript.
كيف تكتب كود HTML ديناميكيًا باستخدام JavaScript؟
لكتابة تعليمات HTML البرمجية باستخدام JavaScript ، استخدم الطرق التالية:
الطريقة الأولى: كتابة كود HTML ديناميكيًا باستخدام أسلوب document.createElement ()
جافا سكريبت ' document.createElement () 'مع' محتوى النص ”لكتابة كود HTML في JavaScript ديناميكيًا. باستخدام طريقة createElement () ، يمكنك إنشاء عنصر HTML معين ، ويتم استخدام خاصية textContent لتعيين محتوى النص.
بناء الجملة
استخدم الصيغة المحددة لإنشاء عنصر HTML في JavaScript:
وثيقة. خلق العنصر ( 'tagName' )
مثال
هنا ، أولاً ، سننشئ فقرة في ملف JavaScript باستخدام علامة HTML
التي تم تمريرها في ' createElement () ' طريقة:
مقدار ثابت نص = وثيقة. خلق العنصر ( 'ع' ) ؛استخدم خاصية textContent لتعيين النص في فقرة:
نص. محتوى النص = 'مرحبًا بك في Linuxhint' ؛
أخيرًا ، اطبع النص على صفحة الويب باستخدام ' document.write () ' طريقة:
وثيقة. اكتب ( نص. محتوى النص ) ؛هنا ، يمكنك أن ترى في الإخراج أننا نجحنا في كتابة النص على صفحة الويب باستخدام JavaScript:
الطريقة 2: كتابة تعليمات HTML البرمجية ديناميكيًا باستخدام خاصية innerHTML
لكتابة تعليمات HTML البرمجية ديناميكيًا ، استخدم JavaScript ' داخلي HTML ' خاصية. إنها أبسط طريقة لتغيير محتوى عنصر HTML. يدعم جميع المتصفحات.
بناء الجملة
اتبع بناء الجملة المحدد لاستخدام خاصية innerHTML:
داخلي HTML = 'نص'مثال
في ملف HTML ، أنشئ أولاً زرًا يستدعي الوظيفة المحددة ' عنوان() ”في JavaScript في حدث النقر:
< زر عند النقر = 'عنوان()' > انقر هنا زر >قم بإنشاء فقرة باستخدام علامة
حيث سيتم عرض النص من JavaScript وقم بتعيين معرف لها:
< ع معرف = 'عنوان' > ص >تحديد وظيفة ' عنوان() 'في ملف JavaScript. احصل على مرجع عنصر HTML باستخدام المعرف المخصص له بمساعدة ' getElementById () 'وتطبيق' داخلي HTML 'الملكية عليه:
عنوان الوظيفة ( ) {وثيقة. getElementById ( 'عنوان' ) . داخلي HTML = '
مرحبًا بك في Linuxhint
' ؛}
انتاج |
قمنا بتجميع جميع المعلومات الأساسية المتعلقة بكتابة كود HTML ديناميكيًا باستخدام JavaScript.
استنتاج
لكتابة تعليمات HTML البرمجية ديناميكيًا في JavaScript ، استخدم ' document.createElement () 'مع' محتوى النص 'الملكية أو' داخلي HTML ' خاصية. في الطريقة الأولى ، لا تحتاج إلى أي كود HTML ، بينما في خاصية HTML الداخلية ، تحتاج إلى الوصول إلى عنصر HTML وإجراء عملية عليه. في هذا البرنامج التعليمي ، وصفنا طرق كتابة كود HTML باستخدام JavaScript ديناميكيًا.