ویژگی 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>span</span> است.

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

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

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

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

پشتیبانی مرورگر

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

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی