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

استخدامات innerText و innerHtml ؟؟

Eslam Wael

السؤال

Recommended Posts

  • 1

innerText تقوم بوضع المحتوى بشكل نصي 
innerHtml تقوم بوضع المحتوى على هيئة html
سيتضح الأمر من خلال المثال التالي

<!DOCTYPE html>
<html>
<body>
<div id="test">
<button onclick='document.getElementById("test").innerText="<h1>sharaf</h1>"'>click</button>
</div>
  </body>
</html>

الكود السابق سيقوم بكتابة <p>sharaf</p> حرفيًا كما هي دون معالجة  الوسوم الخاصة بالhtml بل سيقوم بكتابتها كسلسلة نصية بينما المثال التالي

<!DOCTYPE html>
<html>
<body>
<div id="test">
<button onclick='document.getElementById("test").innerHTML="<h1>sharaf</h1>"'>click</button>
</div>


</body>

</html>

سيقوم بكتابة sharaf ولكن سيكون حجم الخط ضخم لأنه سيقوم بمعالجة الوسم h1 حيث أنه يقوم بكتابة الشفرة ك html وليس كسلسلة نصية

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

  • 1

يتعلق الفرق بين innerText و innerHTML بطريقة تعاملهما مع نصوص HTML.

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

أما الـ innerHTML، فهي خاصية تستخدم لجلب النص والعناصر الـ HTML الذي يتم عرضه داخل عنصر HTML. بشكل عام، يمكن استخدام innerHTML لجلب النص والعناصر الـ HTML الموجودة داخل العنصر وكذلك لإدخال عناصر HTML جديدة داخل الصفحة.

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

ومن المهم التأكد دائمًا من تنظيف النصوص الخاصة بالمستخدم قبل إدخالها باستخدام innerHTML لتجنب ثغرات أمان الويب مثل cross-site scripting (XSS).

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

  • 1

الـinnerText والـinnerHtml هما خاصيتان في JavaScript تستخدم لتحديث عناصر HTML.

الفرق بينهما هو أن innerText يمكنه تعيين النص الموجود داخل العنصر، بينما يُستخدم الـinnerHtml لتحديث كافة عناصر HTML الموجودة داخل العنصر.

innerText

<p id="example">Welcome!</p>
let example = document.getElementById("example");
example.innerText = "Hello World!";

النتيجة ستكون:

 

<p id="example">Hello World!</p>

innerHtml

<div id="example"></div>
let example = document.getElementById("example");
example.innerHTML = "<h3>Hello World!</h3>";

النتيجة ستكون:

<div id="example"> <h3>Hello World!</h3> </div>

ملاحظة: يجب توخي الحذر عند استخدام الـinnerHtml لأنه يمكن استخدامه لإدخال رمز ضار (مثل الهجوم XSS). لذا يجب التأكد من مصدر ومحتوى النص الذي تقوم بإدخاله.

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

  • 0

يتم استخدام خصائص innerHTML و innerText للحصول على محتوى عنصر HTML أو تعيينه.

وبالإضافة لتوضيح الفرق بينهما في التعليقات السابقة يوجد فروقات أخرى بينهما

بعض الاختلافات:

  1. تقوم خاصية innerHTML بإرجاع أو تعيين رمز HTML بالكامل للعنصر ، بما في ذلك العلامات والتباعد.
  2. تقوم الخاصية innerText بإرجاع أو تعيين محتوى النص العادي فقط للعنصر وتوابعه ، باستثناء العلامات والنص المخفي.
  3. يمكن استخدام خاصية innerHTML لإدراج عناصر HTML جديدة في المستند .
  4. يمكن استخدام الخاصية innerText فقط لإدراج نص عادي .
  5. لا تؤدي خاصية innerHTML إلى إعادة التدفق (عملية تعيد حساب تخطيط المستند) عند الحصول على قيمتها .
  6. تقوم خاصية innerText بتشغيل إعادة التدفق عند الحصول على قيمتها ، مما قد يؤثر على الأداء
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...