Eslam Wael نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 اريد توضيح اخوتي بخصوص innerText و innerHtml الفرق بينهم و متي يمكنني استخدام كلا منهما 2 اقتباس
1 شرف الدين حفني نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 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 Mustafa Suleiman نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 يتعلق الفرق بين 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 محمد Fahmy نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 الـ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 عبدالباسط ابراهيم نشر 11 مارس 2023 أرسل تقرير نشر 11 مارس 2023 يتم استخدام خصائص innerHTML و innerText للحصول على محتوى عنصر HTML أو تعيينه. وبالإضافة لتوضيح الفرق بينهما في التعليقات السابقة يوجد فروقات أخرى بينهما بعض الاختلافات: تقوم خاصية innerHTML بإرجاع أو تعيين رمز HTML بالكامل للعنصر ، بما في ذلك العلامات والتباعد. تقوم الخاصية innerText بإرجاع أو تعيين محتوى النص العادي فقط للعنصر وتوابعه ، باستثناء العلامات والنص المخفي. يمكن استخدام خاصية innerHTML لإدراج عناصر HTML جديدة في المستند . يمكن استخدام الخاصية innerText فقط لإدراج نص عادي . لا تؤدي خاصية innerHTML إلى إعادة التدفق (عملية تعيد حساب تخطيط المستند) عند الحصول على قيمتها . تقوم خاصية innerText بتشغيل إعادة التدفق عند الحصول على قيمتها ، مما قد يؤثر على الأداء اقتباس
السؤال
Eslam Wael
اريد توضيح اخوتي بخصوص innerText و innerHtml الفرق بينهم و متي يمكنني استخدام كلا منهما
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.