जावास्क्रिप्ट हार्डल डोम - हार्डल एचटीएमएल परिवर्तन

HTML DOM जेसक्रिप्ट को HTML एलीमेंट की सामग्री को बदलने की अनुमति देता है

एचटीएमएल आउटपुट स्ट्रीम को बदलना

जेसक्रिप्ट डायनेमिक HTML सामग्री बना सकता है:

जेसक्रिप्ट में,document.write() एचटीएमएल आउटपुट स्ट्रीम में सीधे लिखने के लिए उपयोग किया जा सकता है:

इंस्टांस

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

स्वयं को प्रयास करें

कभी दस्तावेज़ लोड के बाद document.write() का उपयोग करने की कोई ज़रूरत नहीं है document.write()इससे दस्तावेज़ को ओवरराइड कर दिया जाएगा。

एचटीएमएल सामग्री बदलना

एचटीएमएल दस्तावेज़ की सामग्री को संशोधित करने का सबसे सरल तरीका, 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" के इस एलीमेंट को प्राप्त करने के लिए
  • JavaScript इस एलीमेंट की सामग्री (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" के एलीमेंट को प्राप्त करने के लिए
  • JavaScript इस एलीमेंट की सामग्री (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" के एलीमेंट को प्राप्त करते हैं
  • JavaScript इस एलीमेंट के src अट्रिब्यूट को "smiley.gif" से "landscape.jpg" में बदलता है