ویژگی innerHTML علامت HTML DOM Element

تعریف و استفاده

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 بازمی‌گردد:

element.innerHTML

ویژگی innerHTML تنظیم شود:

element.innerHTML = text

مقدار ویژگی

مقدار توضیح
رشته. محتوای HTML.

مقدار بازگشتی

نوع توضیح
رشته محتوای HTML عنصر.

تفاوت innerHTML، innerText و textContent

ویژگی innerText بازمی‌گردد:

فقط محتوای متنی عناصر و تمام فرزندان آن‌ها را بازمی‌گرداند، بدون فضاهای خالی پنهان CSS و برچسب‌ها، به استثنای عناصر <script> و <style>.

ویژگی innerHTML بازمی‌گردد:

تمام محتوای متنی عناصر، شامل تمام فضاهای خالی و برچسب‌های HTML داخلی.

ویژگی textContent بازمی‌گردد:

تمام محتوای متنی فرزندان و عناصر، با فضاهای خالی و متون پنهان CSS، اما بدون برچسب‌ها.

مثال HTML

<p id="myP">   این عنصر فضای اضافی دارد و شامل <span>عنصر span</span> است.</p>

JavaScript مثال

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

آزمایش کنید

در مثال بالا:

ویژگی innerText بازمی‌گردد:

این عنصر فضای اضافی دارد و شامل عنصر span است.

ویژگی innerHTML بازمی‌گردد:

   این عنصر فضای اضافی دارد و شامل <span>عنصر span</span> است.

ویژگی textContent بازمی‌گردد:

   این عنصر فضای اضافی دارد و شامل عنصر span است.

پشتیبانی ناوگردها

تمام ناوگردها پشتیبانی می‌کنند element.innerHTML:

کروم آئی ای ایج فائر فاکس سافری آپریا
کروم آئی ای ایج فائر فاکس سافری آپریا
پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی پشتیبندگی