خصائص innerHTML لعنصر DOM HTML

التعريف والاستخدام

innerHTML إعداد أو استرجاع محتوى HTML العنصر (HTML داخلي).

انظر أيضًا:

خصائص innerText

خصائص textContent

مثال

مثال 1

الحصول على محتوى HTML العنصر المحدد بـ id="myP":

let html = document.getElementById("myP").innerHTML;

جرب بنفسك

مثال 2

تغيير محتوى HTML العنصر المحدد بـ id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

جرب بنفسك

مثال 3

الحصول على محتوى HTML العنصر <ul> المحدد بـ id="myList":

let html = document.getElementById("myList").innerHTML;

جرب بنفسك

مثال 4

حذف محتوى HTML العنصر <p> المحدد بـ id="demo":

element.innerHTML = "";

جرب بنفسك

مثال 5

تغيير محتوى HTML لكل من العناصر الاثنين:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

جرب بنفسك

مثال 6

تكرار محتويات HTML العنصر:

element.innerHTML += element.innerHTML;

جرب بنفسك

مثال 7

تغيير محتويات HTML و URL للرابط:

element.innerHTML = "W3School";
element.href = "";

جرب بنفسك

النحو

استرداد خاصية innerHTML:

عنصر.innerHTML

تعيين خاصية innerHTML:

عنصر.innerHTML = text

قيمة الخاصية

القيمة الوصف
النص. محتويات HTML.

القيمة المعدة

النوع الوصف
النص محتويات HTML العنصر.

الفرق بين innerHTML و innerText و textContent

innerText الخاصية تعود بـ:

يستعيد فقط نص العنصر وكل الأبناء، بدون مسافات مخفية CSS و علامات، باستثناء عناصر <script> و <style>.

innerHTML الخاصية تعود بـ:

محتويات العنصر، بما في ذلك كل المسافات والنصوص الداخلية للHTML.

textContent الخاصية تعود بـ:

محتويات العنصر وكل الأبناء بعدة مسافات و نصوص مخفية CSS، ولكن بدون علامات.

مثال HTML

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

مثال JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

جرب بنفسك

في المثال السابق:

innerText الخاصية تعود بـ:

This element has extra spacing and contains a span element.

innerHTML الخاصية تعود بـ:

   This element has extra spacing    and contains <span>a span element</span>.

textContent الخاصية تعود بـ:

   This element has extra spacing    and contains a span element.

دعم المتصفح

جميع المتصفحات يدعمون element.innerHTMLالخطaba

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم الدعم