JavaScript innerHTML vs innerText In Hindi

📔 : Java Script 🔗

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 में पढ़ेंगे।

JS innerText

innerText का use selected element की text value return करता है या selected element के लिए new text value set करता है।

means अगर Para Text की innerText get करें तो हमें सिर्फ इसके अंदर की text value यानि "Para Text" ही मिलेगी , और new value set करने के लिए simple text value assign करके change कर सकते हैं ।

JS innerText Example

File : js_innerText.html

CopyFullscreenRun

<!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>

Output

Simple Paragraph Strong Text
Simple Paragraph Strong Text

Example में आप देख सकते हैं कि div के अंदर के elements थे लेकिन हमें सिर्फ उसकी text value मिली , इसे आप inpect element करके भी देख सकते हैं।

JS innerHTML

वही अगर innerHTML की बात की जाए तो यह selected element के अंदर के Tags के साथ HTML Value return करती है या new HTML Value set करती है ।

Means अगर same element Para Text की innerHTML value get की जाए तो हमें "Para Text " मिलेगा।

JS innerHTMl Example

File : js_innerHTML.html

Copy Fullscreen Run

<!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>

Output

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 में element की जगह new HTML Value <h3> है।

अब आप शायद innerText और innerHTML के बारे में clear हो गए होंगे।

JavaScript innerHTML vs innerText In Hindi

JS innerText

JS innerText Example

Output

JS innerHTML

JS innerHTMl Example

Output

This is new Value

Related Topics :

Rahul Kumar

JavaScript innerHTML vs innerText In Hindi

JS innerText

JS innerText Example

Output

JS innerHTML

JS innerHTMl Example

Output

This is new Value

Related Topics :

Rahul Kumar

Watch Video.

Title