القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة. اقرأ أكثر.

تسمح لك خصائص innerHTML و externalHTML DOM قراءة وكتابة المحتوى على صفحة ويب. يمكنك استخدامها لجلب العلامات أو إجراء تغييرات عليها ، وهما متشابهان من نواح كثيرة. لكن هناك فرق كبير.

عند العمل مع DOM ، ستستخدم innerHTML و externalHTML بشكل مختلف تمامًا. تعرف على كيفية استخدام هاتين الخاصيتين مع أمثلة عملية.

ما هو Inner HTML؟

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

ضع في اعتبارك نموذج التعليمات البرمجية هذا:

<لغة البرمجة>
<جسم>
<صبطاقة تعريف="myP">أنا فقرة.ص>


<النصي>
وثيقة.getElementById ("myP") .innerHTML = "مرحبا بالعالم";
النصي>
جسم>


لغة البرمجة>

في متصفحك ، سترى فقرة قياسية مع النص البديل ، مثل:

تحدد خاصية innerHTML محتويات ملفعنصر في هذا المثال.

ما هو الخارجي HTML؟

تتشابه خاصية OuterHTML مع لغات عدة. يمكنك استخدامه للحصول على محتويات عنصر محدد أو تعيينها. ومع ذلك ، فإنه يحدد أيضًا الترميز الذي يمثل العنصر نفسه. يتضمن ذلك علامة الفتح وأي خصائص وعلامة الإغلاق - عند الاقتضاء.

instagram viewer

راجع المثال السابق لترى كيف تختلف لغة HTML الخارجية:

<لغة البرمجة>
<جسم>
<صبطاقة تعريف="myP">أنا فقرة.ص>


<النصي>
وثيقة.getElementById ("myP") .outerHTML = "
استبدل هذا H1 فقرة.
"
النصي>
جسم>
لغة البرمجة>

يجب أن ترى في متصفحك شيئًا كالتالي:

في هذا المثال ، تقوم خاصية externalHTML بتغيير ملف ص عنصر في h1 عنصر.

تعرف على الفرق ومتى تستخدم هذه الخصائص

هناك العديد من أوجه التشابه بين خاصيتين innerHTML و externalHTML DOM ، لكن هناك اختلاف رئيسي واحد. تلتقط خاصية innerHTML محتويات HTML للعنصر. في المقابل ، تلتقط خاصية externalHTML HTML الذي يمثل العنصر نفسه ومحتواه.

يمكنك استخدام هذه الخصائص لقراءة وكتابة محتوى HTML عبر DOM. سيكون DOM مفهومًا شائعًا ومهمًا طوال عملية تطوير JavaScript.