جسٹاگرافک ایچ تی ایم ڈی او ایم - تبدیلی ایچ تی ایم

HTML DOM جسوس کی مدد سے HTML عناصر کا محتوا بدلنا بھی ممکن ہے

HTML خروجی تبدیل کرنا

جسوس نے دینامی HTML محتوا پیدا کرنے کی صلاحیت دی

جسوس میں،document.write() ایسا استعمال کیا جاسکتا ہے کہ سائیٹ میں براہ راست HTML خروجی لکھی جائے

مثال

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

خود کو کوشش کریں

دستاویز لوڈ کے بعد کوئی بھی صورت میں document.write() استعمال نہ کریں document.write()ایسا کرنا دستاویز کو مکمل طور پر کپٹ کریگا

HTML محتوا بدلنا

HTML دستاویز کا محتوا بدلنے کا سادہ ترین طریقہ، اس استعمال کریں innerHTML خصوصیت

اگر آپ HTML عناصر کا محتوا بدلنا چاہتے ہیں تو اس جملے استعمال کریں:

document.getElementById(id).innerHTML = نئی لکچر

اس مثال میں <p> عنصر کا محتوا:

مثال

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

خود کو کوشش کریں

مثال توضیح:

  • بعد کا HTML وسیلہ id="p1" کا <p> عناصر کا حامل ہے
  • ہم نے HTML DOM استعمال کیا اور id="p1" کا اس عنصر حاصل کیا
  • جسوس نے اس عنصر کا محتوا (innerHTML) "Hello Kitty!" میں تبدیل کیا

اس مثال میں <h1> عنصر کا محتوا:

مثال

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

خود کو کوشش کریں

مثال توضیح:

  • بعد کا HTML id="header" کا ایک <h1> عناصر کا حامل ہے
  • ہم نے HTML DOM استعمال کیا اور id="header" کا عناصر حاصل کیا
  • جسٹاگرام اس عنصر کی محتوائیں (innerHTML) تبدیل کرتا ہے

قیمتی تبدیل کرنا

اگر آپ HTML اپرائز کی قیمتی کو تبدیل کرنا چاہتے ہیں تو اس شرط کو استعمال کریں:

document.getElementById(id).عنصر = نئی قیمتی

اس مثال میں <img> عنصر کا src قیمتی کا مالکیت:

مثال

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

خود کو کوشش کریں

مثال توضیح:

  • بالائی HTML ڈاکومن میں id="myImage" کا <img> عنصر موجود ہے
  • ہم HTML DOM کا استعمال کرتے ہیں تاکہ id="myImage" کا عنصر حاصل کریں
  • جسٹاگرام اس عنصر کا src اپرائز سے "smiley.gif" کو "landscape.jpg" میں تبدیل کرتا ہے