تغییر HTML در جاوااسکریپت

درک اینکه چگونه می توانید دستکاری DOM را با استفاده از JavaScript با گزینه هایی مانند JavaScript innerHTML انجام دهید ، به شما امکان می دهد ویژگی های مفید به وب سایت خود اضافه کنید.

در این آموزش ، شما می آموزید که چگونه می توانید HTML را با استفاده از JavaScript تغییر دهید ، و در مورد محبوب ترین راه ها برای تنظیم محتوای HTML از طریق استفاده از JavaScript مطالعه می کنید. این شامل ویژگی JavaScript innerHTML است که به شما امکان می دهد محتوای هر برچسب متن را با توجه به نیاز خود تغییر دهید.

نکات اصلی تغییر HTML در جاوااسکریپت

• برای اینکه JavaScript بتواند محتوای یک عنصر HTML را تغییر دهد ، ما از HTML DOM استفاده می کنیم.
• از JavaScript می توان برای ایجاد محتوای HTML پویا استفاده کرد.

تغییر HTML

در JavaScript ،document.write اولین عملکرد دستکاری DOM است. فقط منطقی است که ما آموزش خود را با آن شروع می کنیم ، درست است؟ با استفاده از این دستور می توانید مستقیماً در جریان خروجی HTML بنویسید.

document.write(Date());

این روش نوشتن جاوا اسکریپت معمولاً برای آزمایش استفاده می شود. هنگام استفاده از آن برای اهداف مختلف ، باید یک هشدار در نظر گرفته شود: شما همیشه باید document.write را هنگامی که سند قبلاً بارگیری شده است اجرا کنید – در غیر این صورت ، بازنویسی رخ می دهد.

استفاده از innerHTML برای تغییر محتوا

ساده ترین راه ویرایش محتوا در یک عنصر HTML استفاده از ویژگی innerHTML است.

در مثال کد زیر ، ما از ویژگی JavaScript innerHTML برای تغییر محتوای عنصر <p> استفاده می کنیم:

document.getElementById("p2").innerHTML = "Hello World again!";

اکنون ، در مثال کد زیر ، محتوای عنصر <h1> را تغییر می دهیم:

var element = document.getElementById("id1");
element.innerHTML = "New heading";

تغییر مقدار صفت

همچنین می توانید مقادیر صفات HTML را تغییر دهید.

نگاهی به مثال زیر بیندازید. در آن مقدار صفت src را برای عنصر <img> تغییر می دهیم:

document.getElementById("myImage").src = "background.jpg";

خلاصه تغییر HTML در جاوااسکریپت

• برای تغییر محتوا در HTML می توانید از ویژگی JavaScript innerHTML استفاده کنید.
• در این مقاله می توانید اطلاعات بیشتری در مورد JavaScript innerHTML کسب کنید.
• برای تغییر مقادیر صفات عنصر HTML نیز می توانید از JavaScript استفاده کنید.