خانه آموزش زبان جاوااسکریپت آموزش DOM در جاوااسکریپت ویژگی innerHTML در DOM جاوااسکریپت

ویژگی innerHTML در DOM جاوااسکریپت

توسط

۱۴۰۰-۰۳-۱۸

آموزش ویژگی innerHTML در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی innerHTML در DOM جاوااسکریپت با من همراه باشید.

ویژگی innerHTML در DOM جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 ویژگی innerHTML در DOM جاوااسکریپت
2 مثال از این ویژگی
3 پشتیبانی مرورگرها
4 شکل نوشتاری
5 نکات و توضیحات

ویژگی innerHTML در DOM جاوااسکریپت

با استفاده از ویژگی innerHTML میتونیم هم محتوای داخل یک عنصر رو بدست آوریم و یا هم میتونیم محتوای HTML جدید در داخل عنصر قرار دهیم.

این ویژگی محتوای HTML رو برمیگردونه و یا میتونه محتوای HTML جدید در عنصر قرار دهد.

مقدار برگشتی	یک رشته که شامل محتوای HTML یک عنصر می باشد

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : گرفتن محتوای یک تگ و ریختن همون محتوا در تگ دیگر

<script>

function get(){
 var mytext , result;
 mytext = document.getElementById("MyText");
 result = document.getElementById("Result");
 result.innerHTML = mytext.innerHTML;
}

</script>

function get(){

var mytext , result;

mytext = document.getElementById("MyText");

result = document.getElementById("Result");

result.innerHTML = mytext.innerHTML;

}

</script>

امتحان کنید

مثال شماره ۲ : تنظیم / ست کردن مقدار جدید در تگ

<script>

function set(){
 var mytext;
 mytext = document.getElementById("MyText");
 mytext.innerHTML = "محتوای جدید من";
}

</script>

function set(){

var mytext;

mytext = document.getElementById("MyText");

mytext.innerHTML = "محتوای جدید من";

}

</script>

امتحان کنید

مثال شماره ۳ : حذف کردن مقدار موجود در تگ

<script>

function set(){
 var mytext;
 mytext = document.getElementById("MyText");
 mytext.innerHTML = "";
}

</script>

function set(){

var mytext;

mytext = document.getElementById("MyText");

mytext.innerHTML = "";

}

</script>

امتحان کنید

مثال شماره ۴ : قرار دادن تگ های HTML درون یک عنصر – میخوایم با کلیک بروی یک دکمه، تگ a ( یا لینک ) با آدرس سایت فری لرن درون تگ مورد نظر ما اضافه شه.

<script>

function set(){
 var mytext;
 mytext = document.getElementById("MyText");
 mytext.innerHTML = "<a href='https://free-learn.ir/'>سایت فری لرن</a>";
}

</script>

function set(){

var mytext;

mytext = document.getElementById("MyText");

mytext.innerHTML = "<a href='https://free-learn.ir/'>سایت فری لرن</a>";

}

</script>

امتحان کنید

مثال شماره ۵ : نشان دادن تفاوت ۳ویژگی innerText و innerHTML و textContent

<script>

function inH(){
 alert(document.getElementById("MyText").innerHTML)
}

function inT(){
 alert(document.getElementById("MyText").innerText)
}

function TxC(){
 alert(document.getElementById("MyText").textContent)
}

</script>

function inH(){

alert(document.getElementById("MyText").innerHTML)

}

function inT(){

alert(document.getElementById("MyText").innerText)

}

function TxC(){

alert(document.getElementById("MyText").textContent)

}

</script>

امتحان کنید

توضیح مثال بالا :

در مثال بالا خواستیم تفاوت ۳ ویژگی innerText و innerHTML و textContent رو با همدیگه ببینیم.

innerHTML : میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
innerText : میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله ها و دستورات HTML ) برگردونه.
textContent : میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام ویژگی	Chrome	Firefox	Opera	Safari	IE
innerHTML	بله	بله	بله	بله	بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.

گرفتن مقدار :

Element.innerHTML;

1	Element.innerHTML;

تنظیم / ست کردن مقدار جدید :

Element.innerHTML = " New_Value ";

1	Element.innerHTML = " New_Value ";

حذف محتوای داخل عنصر :

Element.innerHTML = "";

1	Element.innerHTML = "";

Free-Learn

نکات و توضیحات

ویژگی innerHTML میتونه محتوای یک عنصر رو که شامل دستورات HTML و خط فاصله بین کلمات می باشد برگردونه.
ویژگی innerText میتونه فقط خوده محتوارو ( بدون محاسبه خط فاصله بین کلمات و دستورات HTML ) برگردونه.
ویژگی textContent میتونه محتوای یک عنصر رو که فقط شامل خط فاصله می باشد برگردونه.

Free-Learn

دریافت PDF یا پرینت این مطلب