जावास्क्रिप्ट एचटीएमएल डोम - एचटीएमएल बदलना
HTML DOM जावास्क्रिप्ट को 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" - एक जावास्क्रिप्ट
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" - एक जावास्क्रिप्ट
innerHTMLउस तत्व की सामग्री ( ) को "नया शीर्षक" में बदल देता है
किसी विशेषता का मान बदलना
HTML विशेषता का मान बदलने के लिए, इस सिंटैक्स का उपयोग करें:
document.getElementById(id).attribute = new value
यह उदाहरण किसी <img>तत्व की src विशेषता के मान को बदलता है:
उदाहरण
<!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" - एक जावास्क्रिप्ट
srcउस तत्व की विशेषता को "smiley.gif" से "landscape.jpg" में बदल देता है।
गतिशील HTML सामग्री
जावास्क्रिप्ट गतिशील HTML सामग्री बना सकता है:
दिनांक: शनि 29 2022 21:48:39 जीएमटी+0000 (समन्वित सार्वभौमिक समय)
उदाहरण
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
दस्तावेज़.लिखें ()
जावास्क्रिप्ट में, 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()दस्तावेज़ लोड होने के बाद कभी भी उपयोग न करें । यह दस्तावेज़ को अधिलेखित कर देगा।