٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

JavaScript HTML DOM – تغییر HTML

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

محمد یوسفی

28 جولای 2021

تHTML DOM به JavaScript اجازه می دهد تا محتوای عناصر HTML را تغییر دهد.


تغییر محتوای HTML

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

برای تغییر محتوای یک عنصر HTML ، از این نحو استفاده کنید:

document.getElementById(id).innerHTML = new HTML

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

مثال

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>

مثال توضیح داده شده:

  • سند HTML بالا شامل <p>عنصری باid="p1"
  • ما برای بدست آوردن عنصر از HTML DOM استفاده می کنیم id="p1"
  • JavaScript محتوای innerHTMLآن عنصر را به “متن جدید” تغییر می دهد.

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

مثال

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>

مثال توضیح داده شده:

  • سند HTML بالا شامل <h1>عنصری باid="id01"
  • ما برای بدست آوردن عنصر از HTML DOM استفاده می کنیم id="id01"
  • JavaScript محتوای innerHTMLآن عنصر را به “عنوان جدید” تغییر می دهد


تغییر ارزش یک ویژگی

برای تغییر مقدار یک ویژگی HTML ، از این نحو استفاده کنید:

document.getElementById(id).attribute = new value

این مثال مقدار ویژگی src را تغییر <img>می دهد:

مثال

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

مثال توضیح داده شده:

  • سند HTML بالا شامل <img>عنصری باid="myImage"
  • ما برای بدست آوردن عنصر از HTML DOM استفاده می کنیم id="myImage"
  • JavaScript srcویژگی آن عنصر را از “smiley.gif” به “landscape.jpg” تغییر می دهد

محتوای HTML پویا

JavaScript می تواند محتوای HTML پویا ایجاد کند:

تاریخ: سه شنبه 27 ژوئیه 2021 21:03:00 GMT + 0430 (به وقت ایران)

مثال

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date(); </script>

</body>
</html>

document.write ()

در JavaScript ، document.write()می توان برای نوشتن مستقیم در جریان خروجی HTML استفاده کرد:

مثال

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>

document.write()پس از بارگیری سند ، هرگز استفاده نکنید . این سند را رونویسی می کند.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها