كل ما تحتاج لمعرفته حول HTML الداخلي في JavaScript

تعد JavaScript واحدة من أكثر لغات البرمجة استخدامًا. كما أنها تحظى بشعبية كبيرة بسبب تعدد استخداماتها عبر الأنظمة الأساسية. هناك خصائص مختلفة في تجعل عملك في إنشاء موقع ويب ديناميكي أسهل. في هذه المقالة ، سوف نناقش HTML الداخلي في JavaScript بالتسلسل التالي:

• مقدمة في JavaScript
• HTML الداخلي في JavaScript
  • قائمة مرتبة أو غير مرتبة
  • تغيير URL

مقدمة في JavaScript

يتم استخدام JavaScript كلغة برمجة من جانب العميل بالإضافة إلى لغة برمجة من جانب الخادم. يستخدم للتنفيذ من جانب العميل وكذلك من جانب الخادم لأي تطبيق. يمكن أيضًا الإشارة إلى العقدة باسم Node.js في عدة أماكن.

يوفر JavaScript عددًا كبيرًا من الأساليب للعديد من الوظائف التي يمكن تنفيذها بسهولة. هذا ما جعل JavaScript واحدة من أكثر لغات البرمجة شيوعًا ، كما يتم استخدامها أيضًا على نطاق واسع عبر عدة أنواع من تطوير المنتجات.

تحديد مسار الفصل في جافا

HTML الداخلي في JavaScript

الداخل الخاصية في JavaScript هي واحدة من الميزات المفيدة جدًا وتستخدم على نطاق واسع لتوفير جانب أكثر ديناميكية وتنوعًا لصفحات الويب التي يتم إنشاؤها.

إذا حاولنا شرح لغة HTML الداخلية ، فإن العمل الذي تقوم به لغة HTML الداخلية هو ببساطة تحميل محتوى الصفحة دون تحديث الصفحة بأكملها. هذا يحفظ استخدامات البيانات بالإضافة إلى الوقت الذي يستغرقه تحميل الصفحة ويسهل الحصول عليه إلى حد كبير. يمنح هذا المستخدم شعورًا سريعًا وسريع الاستجابة مما يجعل تجربة المستخدم أفضل بكثير.

قد يبدو الأمر صعبًا بعض الشيء ولكن دعنا نحاول فهم ذلك بمساعدة مثال.

مثال:

 
انقر هنا لتغيير نص HTML الداخلي.
function myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Paragraph تغيرت!' }

هنا في الكود أعلاه ، في علامة الفقرة ، يكون معرف ذلك هو الفقرة 1.

هناك وظيفة المسماة myfunction () والتي سيتم إبطالها عند النقر فوق النص 'انقر هنا لتغيير نص HTML الداخلي'.عندما يتم إبطال الوظيفة عند النقر ، يتم تنفيذ الوظيفة التي تقول getElementById ('الفقرة 1') ، والتي تنص على تحديد العنصر ذي المعرف كعرض توضيحي.

علاوة على ذلك ، لدينا وظيفة HTML الداخلية والتي تعني ببساطة ما يجب القيام به بعد النقر. هنا في المثال أعلاه ، هو ببساطة 'تم تغيير الفقرة'.

أدناه هو الإخراج الأولي للكود أعلاه.

ما هو الفرق بين jquery و javascript

أدناه هو الناتج المتغير بعد النقر.

HTML الداخلي مع قائمة مرتبة أو غير مرتبة

يوجد أدناه مثال لإظهار استخدام innerHTML مع قائمة مرتبة أو غير مرتبة.

مثال:

 
 
مرحبا
 
مرحبا مجددا
 
 
انقر فوق الزر أدناه للحصول على محتوى عنصر ul.
جربها تعمل helloFunction () {var x = document.getElementById ('myList'). innerHTML document.getElementById ('paragraph1'). innerHTML = x}

هنا يتم تشغيل HTML الداخلي بواسطة الزر المحدد بالاسم 'جربه'.

الناتج الأولي للنص أعلاه هو:

الإخراج بعد الضغط على الزر. لا يؤدي النقر فوق الزر إلى إعادة تحميل الصفحة ، ولكنه بدلاً من ذلك يرجع إلى استخدام لغة داخلية HTML.

ما هو الشيف في devops

InnerHTML لتغيير عنوان URL

يوجد أدناه مثال آخر يوضح استخدام innerHTML لتغيير عنوان URL عند النقر فوق الزر.

مثال:

  ويكيبيديا تغيير وظيفة الارتباط myFunction () {document.getElementById ('myAnchor'). innerHTML = 'Google' document.getElementById ('myAnchor'). href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

يعطي المثال أعلاه في البداية رابطًا إلى موقع Wikipedia على الويب ، ولكن عند النقر على الزر ، يتغير الرابط إلى Google.

هناك العديد من هذه العمليات حيث يكون innerHTML مفيدًا عندما لا يتم إعادة تحميل الصفحة ويتم تحديث جزء منها فقط.هذا يوفر الوقت ، فضلا عن بذل جهود أقل ، من أجل هذا النهج.أكبر ميزة لـ innerHTML هي تجربة المستخدم التي يتم تعزيزها بهذه الميزة.

تفحص ال بواسطة Edureka. سيساعدك تدريب شهادة تطوير الويب على تعلم كيفية إنشاء مواقع ويب رائعة باستخدام HTML5 و CSS3 و Twitter Bootstrap 3 و jQuery و Google APIs ونشرها في Amazon Simple Storage Service (S3).

لديك سؤال لنا؟ يرجى ذكرها في قسم التعليقات في 'سلسلة السلسلة في JavaScript' وسنقوم بالرد عليك.