क्या कोई मुझे बता सकता है कि जावास्क्रिप्ट में आंतरिक HTML क्या कर रहा है और मुझे उदाहरण दें कि मैं इसका उपयोग कैसे कर सकता हूं?जावास्क्रिप्ट में आंतरिक HTML क्या कर रहा है?
उत्तर
The innerHTML
property मिलता है या एक तत्व नोड के एचटीएमएल सामग्री सेट करने के लिए प्रयोग किया जाता है।
उदाहरण:http://jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert(content);
यह एक दिया एचटीएमएल टैग की पाठ्य सामग्री का प्रतिनिधित्व करता है। इसमें स्वयं के टैग भी शामिल हो सकते हैं।
आप किसी चयनित टैग की सामग्री एकत्र या सेट कर सकते हैं।
एक छद्म विचार, एक कमरे के भीतर कई बक्से होने और विचार 'भीतर सब कुछ है कि बॉक्स'
innerHTML
संपत्ति दस्तावेज़ ऑब्जेक्ट मॉडल (डोम) का हिस्सा है कि जावास्क्रिप्ट की अनुमति देता है मतलब है अपने समान रूप प्रदर्शित होने वाली वेबसाइट में हेरफेर करने के लिए कोड। विशेष रूप से, यह किसी दिए गए DOM तत्व (HTML टैग) के भीतर सबकुछ पढ़ने और बदलने की अनुमति देता है।
हालांकि, innerHTML
का उपयोग कर डोम जोड़तोड़ व्यक्ति डोम वस्तुओं के आधार पर जोड़तोड़ की तुलना में धीमी और अधिक विफलता-प्रवण हैं।
प्रत्येक HTML
तत्व में innerHTML
संपत्ति है जो HTML
कोड और उस तत्व के उद्घाटन और समापन टैग के बीच होने वाले पाठ को परिभाषित करती है। कुछ उपयोगकर्ता इंटरैक्शन के बाद तत्व के innerHTML
को बदलकर, आप अधिक इंटरैक्टिव पेज बना सकते हैं।
हालांकि, innerHTML
का उपयोग करके कुछ तैयारी की आवश्यकता होती है यदि आप इसे आसानी से और विश्वसनीय रूप से उपयोग करने में सक्षम होना चाहते हैं। सबसे पहले, आपको वह तत्व देना होगा जिसे आप आईडी बदलना चाहते हैं। उस आईडी के साथ आप getElementById
फ़ंक्शन का उपयोग करने में सक्षम होंगे, जो सभी ब्राउज़रों पर काम करता है।
आपके द्वारा सेट अप करने के बाद अब आप किसी तत्व के टेक्स्ट में हेरफेर कर सकते हैं। शुरू करने के लिए, आइए बोल्ड टैग के अंदर टेक्स्ट को बदलने का प्रयास करें। JavaScript
कोड:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
इस उत्तर से here
प्रत्येक HTML तत्व एक innerHTML संपत्ति है कि दोनों एचटीएमएल कोड और पाठ कि उस तत्व के उद्घाटन और समापन टैग के बीच होता है परिभाषित करता है। कुछ उपयोगकर्ता इंटरैक्शन के बाद तत्व के आंतरिक HTML को बदलकर, आप अधिक इंटरैक्टिव पेज बना सकते हैं।
हालांकि, आंतरिक HTML का उपयोग करके कुछ तैयारी की आवश्यकता होती है यदि आप इसे आसानी से और विश्वसनीय रूप से उपयोग करने में सक्षम होना चाहते हैं। सबसे पहले, आपको वह तत्व देना होगा जिसे आप आईडी बदलना चाहते हैं। उस आईडी के साथ आप getElementById फ़ंक्शन का उपयोग करने में सक्षम होंगे, जो सभी ब्राउज़रों पर काम करता है।
आंतरिक HTML आईडी/नाम के आधार पर सामग्री प्राप्त करता है और उन्हें बदल देता है।
<!DOCTYPE html>
<html>
<head>
\t <title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3>
</body>
</html>
जब आप बटन क्लिक करें, h3 में सामग्री से innerHTML assignent यानी तिथि बदल दिया जाएगा()।
आंतरिक HTML प्रत्येक तत्व की एक संपत्ति है। यह आपको बताता है कि तत्व के प्रारंभिक और समापन टैग के बीच क्या है, और यह आपको तत्व की सामग्री सेट करने देता है।
संपत्ति एक वस्तु का एक पहलू का वर्णन है। यह किसी ऑब्जेक्ट के विपरीत किसी ऑब्जेक्ट के विपरीत होता है।
<p id="myParagraph">
This is my paragraph.
</p>
आप पैराग्राफ का चयन कर सकते हैं और फिर मान बदलने की यह निम्न आदेश के साथ innerHTML है:
document.getElementById("myParagraph").innerHTML = "This is my paragraph";
- 1. आंतरिक HTML
- 2. जावास्क्रिप्ट आंतरिक HTML आईई के लिए काम नहीं कर रहा है?
- 3. आंतरिक HTML
- 4. आंतरिक HTML
- 5. आंतरिक HTML
- 6. फ़ायरफ़ॉक्स में आंतरिक HTML = "" धीमा क्यों है
- 7. जावास्क्रिप्ट में आंतरिक HTML परिवर्तनों को कैसे रोकें?
- 8. नोड बनाम आंतरिक HTML
- 9. जब मैं आंतरिक HTML
- 10. जावास्क्रिप्ट getElementByID() काम नहीं कर रहा है
- 11. document.body.clientHeight काम नहीं कर रहा है? (जावास्क्रिप्ट)
- 12. एचटीएमएल() बनाम आंतरिक HTML jquery/जावास्क्रिप्ट और एक्सएसएस हमले
- 13. डीप क्लोनिंग बनाम आंतरिक HTML की सेटिंग: तेज़ क्या है?
- 14. जावास्क्रिप्ट में ट्रिम करें? यह कोड क्या कर रहा है?
- 15. क्या एचटीएमएल 5 जावास्क्रिप्ट के साथ कम कर रहा है?
- 16. "आंतरिक HTML + = ..." बनाम "appendChild (txtNode)"
- 17. जावास्क्रिप्ट टैग के लिए खोज करें और इसे आंतरिक HTML
- 18. मैं जावास्क्रिप्ट में आंतरिक HTML का उपयोग कैसे कर सकता हूं?
- 19. आईई में पूर्व तत्व में आंतरिक HTML के साथ नई लाइन (\ n) डालें काम नहीं कर रहा है?
- 20. जावास्क्रिप्ट इवेंटसोर्स एसएसई ब्राउज़र में गोलीबारी नहीं कर रहा है
- 21. वर्तमान में सबसे अच्छा HTML/CSS/जावास्क्रिप्ट कॉन्फ़िगरेशन क्या है?
- 22. एचओएम अपवाद एचटीएमएल इकाइयों को आंतरिक HTML
- 23. जावास्क्रिप्ट - बाहरी स्ट्रिंग के लिए आंतरिक HTML का उपयोग * बिना * HTML- एन्कोडेड विशेष वर्ण?
- 24. जावास्क्रिप्ट में HTML को अनदेखा कैसे करें?
- 25. जावास्क्रिप्ट में सरल HTML sanitizer
- 26. jQuery में, मैं एक JSON परिणाम में HTML वापस कर रहा हूं, मुझे क्या बचाना है?
- 27. HTML प्राप्त क्लिपबोर्ड जावास्क्रिप्ट में
- 28. जावास्क्रिप्ट: HTML
- 29. जावास्क्रिप्ट ऑब्जेक्ट प्रॉपर्टी अपडेट कर रहा है?
- 30. डीबग जो जावास्क्रिप्ट रीडायरेक्ट कर रहा है
और यह एक संपत्ति किसी भी मानक लेकिन समर्थित में उल्लेख नहीं किया है सभी प्रमुख ब्राउज़रों द्वारा। –
@ फ़ेलिक्स: हालांकि यह [HTML5] का हिस्सा है (http://www.w3.org/TR/html5/apis-in-html-documents.html#innerhtml)। – user113716
ओह ठीक है, मुझे यह नहीं पता था :) –