الفرق بين innerhtml و textcontent

فيصل • منذ 5 سنوات

السلام عليكم لدي سؤال بسيط مالفرق بين 

textcontet و innerhtml  و innertext  و outerhtml  ؟

 

كلها تطلع لي نفس المحتوى ما اشوف اي فرق !

كلمات دليلية: dom javascript js

الإجابة الصحيحة

عمار الخوالدة • منذ 5 سنوات

وعليكم السلام.

بل لكل واحدة منها وظيفة مختلفة،،

انظر الى الـ HTML التالي:
 

<div>
    <p>a</p>
    <p>b</p>
</div>

 

تنفيذ الخاصية innerHTML على الـ div سيعطيك الـ html الموجود بداخل الـ div:
 

    <p>a</p>
    <p>b</p>

 

بينما outerHTML ستعطيك الـ html كاملا، وليس الـ html الموجود داخل العنصر فقط:
 

<div>
    <p>a</p>
    <p>b</p>
</div>"

 

أما innerText و textContent، فستطبعان النصوص، وليس الـ html، وبينهما عدد من الفروق:

1- textContent ستجلب جميع النصوص، بما في ذلك النصوص الموجودة داخل <script> او <style> بينما innerHtml معنية فقط بجلب النصوص القابلة للقراءة للمستخدم.
2- innerHtml لا تُرجع النص في حال كان النص مخفيا باستخدام css، بينما textContent ستجلبه في جميع الاحوال بغض النظر عن الـ style المطبق عليه.

للمزيد من الفروقات بشكل مفصل بين innerText و textContent 
http://perfectionkills.com/the-poor-misunderstood-innerText/

الإجابات (2)

عمار الخوالدة • منذ 5 سنوات
الإجابة الصحيحة
مميز

وعليكم السلام.

بل لكل واحدة منها وظيفة مختلفة،،

انظر الى الـ HTML التالي:
 

<div>
    <p>a</p>
    <p>b</p>
</div>

 

تنفيذ الخاصية innerHTML على الـ div سيعطيك الـ html الموجود بداخل الـ div:
 

    <p>a</p>
    <p>b</p>

 

بينما outerHTML ستعطيك الـ html كاملا، وليس الـ html الموجود داخل العنصر فقط:
 

<div>
    <p>a</p>
    <p>b</p>
</div>"

 

أما innerText و textContent، فستطبعان النصوص، وليس الـ html، وبينهما عدد من الفروق:

1- textContent ستجلب جميع النصوص، بما في ذلك النصوص الموجودة داخل <script> او <style> بينما innerHtml معنية فقط بجلب النصوص القابلة للقراءة للمستخدم.
2- innerHtml لا تُرجع النص في حال كان النص مخفيا باستخدام css، بينما textContent ستجلبه في جميع الاحوال بغض النظر عن الـ style المطبق عليه.

للمزيد من الفروقات بشكل مفصل بين innerText و textContent 
http://perfectionkills.com/the-poor-misunderstood-innerText/

فيصل • منذ 5 سنوات

شكرا لك، نفس الكلام سمعته بمقطع لكن يوم جربت بنفسي بالمتصفح كان يطلع لي نتيجة وحده. 

 

النتيجة بال console مثل ما كتبت انت بس بالمحرر يوم استعرضها بالموقع تختلف!

بالنسبة للمقارنة تلخبطت شوي انت تقارن بين ال Textcontent و innertext ولا و inneerhtml ? 

عمار الخوالدة: مستحيل تعطي كلها نتيجة وحدة، الحالة الوحدة التي من الممكن ان تعطي نفس النتيجة هي ان يكون الـ tag فارغ، او لا يوجد بداخله أي tag آخر،، لكن في كل الأحوال outerHTML لن تعطيك نفس النتيجة بل ستعطيك html كناتج. المقارنة بين innerText و textContent.

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !