If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
innerHTML & innerText ये दो Property DOM ( Document Object Model ) manipulation के लिए बहुत ही important हैं ,इस topic में आप इन्ही के बारे में details में पढ़ेंगे।
innerText का use selected element की text value return करता है या selected element के लिए new text value set करता है।
means अगर <p><span>Para Text </span></p> की innerText get करें तो हमें सिर्फ इसके अंदर की text value यानि "Para Text" ही मिलेगी , और new value set करने के लिए simple text value assign करके change कर सकते हैं ।
File : js_innerText.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerText Example</title>
</head>
<body>
<div id="mydiv">
<p>Simple Paragraph <strong>Strong Text</strong></p>
</div>
<!-- here we will set text value-->
<div class="result_div"></div>
<script type="text/javascript">
/* step 1 : select mydiv*/
let div = document.getElementById('mydiv');
/*step 2 : now select targeted div result_div*/
let result_div = document.querySelector('.result_div');
/*step 3 : finally set the text value in new div*/
result_div.innerText = div.innerText;
</script>
</body>
</html>Simple Paragraph Strong Text
Simple Paragraph Strong Text
Example में आप देख सकते हैं कि div के अंदर के elements थे लेकिन हमें सिर्फ उसकी text value मिली , इसे आप inpect element करके भी देख सकते हैं।
वही अगर innerHTML की बात की जाए तो यह selected element के अंदर के Tags के साथ HTML Value return करती है या new HTML Value set करती है ।
Means अगर same element <p><span>Para Text </span></p> की innerHTML value get की जाए तो हमें "<span>Para Text </span>" मिलेगा।
File : js_innerHTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript innerHTML Example</title>
</head>
<body>
<div id="mydiv">
<p>Simple Paragraph <strong>Strong Text</strong></p>
</div>
<!-- here we will set text value-->
<div class="result_div"></div>
<script type="text/javascript">
let div = document.getElementById('mydiv');
let result_div = document.querySelector('.result_div');
/* set html value in result_div*/
result_div.innerHTML = div.innerHTML;
/* now change html value of div element*/
div.innerHTML = '<h3>This is new Value</h3>';
</script>
</body>
</html>This is new Value
Simple Paragraph Strong Text
Same Example में mydiv element से innerHTML value निकालकर result_div में set किया, फिर mydiv element में new HTML value को assign किया गया है। Inspect करके आप देख सकते हैं कि mydiv element में <p> element की जगह new HTML Value <h3> है।
अब आप शायद innerText और innerHTML के बारे में clear हो गए होंगे।