In the previous chapter of JavaScript, we have learned the method to target the HTML Element. Now we are about to move on 'How many possible ways are there to display output in JavaScript?'

Although JavaScript executes many of task that has no concern with the display but most of the times different types of JavaScript output data required to display on browser.

JavaScript can display output data in different ways. Below are the properties, methods, and functions that can be used to display output data in JavaScript.

  1. Using innerHTML property
  2. Using innerText property
  3. Using textContent property
  4. Using document.write() method
  5. Using alert()
  6. Using console.log()
  7. Using print()

Using innerHTML property

The innerHTML property is part of the Document Object Model (DOM) that allows JavaScript code to manipulate a website being displayed. Specially it allows reading and replacing everything within a DOM Element (HTML tag).

The innerHTML property can output the data in the form of HTML content. You check in the example.


Code Copied
<script>
    document.write(document.getElementById("test").innerHTML);
</script>
Try Yourself

Using innerText property

The innerText property sets or returns the text content of the specified node and all its descendants.

If innerText property is used then child nodes are removed and replaced by a single text node.


Code Copied
<script>
    document.write(document.getElementById("text").innerText);
</script>
Try Yourself

Using textContent property

The textContent property us similar to the innerText property of JavaScript but there is a difference between them. We will discuss those differences later in this article.


Code Copied
<script>
    document.write(document.getElementById("text").textContent);
</script>
Try Yourself

Using document.write() method

The document.write() is a method which writes a string of text to document stream. The write() method writes HTML expression or JavaScript code to a document. The write() method is used for testing purposes mostly.

If document.write() method is used after fully loaded HTML page then it will override all the existing HTML and gives new HTML Page.


Code Copied
<script>
    document.write(document.getElementById("text").textContent);
</script>
Try Yourself

Using alert()

The alert() method in JavaScript displays an alert box with a specified message along with an 'OK' button. It is often used to make sure that information comes through the user. The alert() box takes the focus away from the current window and forces the browser to read the message.


Code Copied
<script>
    function getAlert(){
        alert(document.getElementById("test").innerHTML);
    }     
</script>
Try Yourself

Using console.log()

The console.log() is a function in JavaScript that is used to print any kind of variables defined before console.log()or to just print any message that needs to be displayed to the user.

console.log() is used for debugging purposes we can call the console.log() method in the browser to display data.


Code Copied
<script>
    console.log(document.getElementById("test").innerHTML);        
</script>
Try Yourself

Using print()

JavaScript print method is used to print the contents of the current window. It basically opens a print dialog box in the browser.


Code Copied
<script>
    function getPrint(){
        print();
    }         
</script>
Try Yourself

What is the difference between innerHTML, innerText, and textContent?

innerHTML property allows us to work with rich text and doesn't automatically encode and decode text. We can get the data to display in a rich text format where CSS can also work.

innerText property retrieves and sets the content from the HTML tag as plain text where spaces are trimmed in results but the CSS styling can be displayed in results. 

textContent property retrieves and sets the content similarly innerText but spaces and whitespace cannot be trimmed and CSS styling cannot be displayed in results.

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

12 comments:

  1. You completely match our expectation and the variety of our information.
    data science course

    ReplyDelete
  2. You re in point of fact a just right webmaster. The website loading speed is amazing. It kind of feels that you're doing any distinctive trick. Moreover, The contents are masterpiece. you have done a fantastic activity on this subject!
    PMP Certification 360DigiTMG
    PMP Course 360DigiTMG
    PMP Course in Malaysia 360DigiTMG
    PMP Training in Malaysia 360DigiTMG
    PMP Training 360DigiTMG

    ReplyDelete
  3. Good to become visiting your weblog again, it has been months for me. Nicely this article that i've been waited for so long. I will need this post to total my assignment in the college, and it has exact same topic together with your write-up. Thanks, good share.
    data science course

    ReplyDelete
  4. I was just browsing through the internet looking for some information and came across your blog. I am impressed by the information that you have on this blog. It shows how well you understand this subject. Bookmarked this page, will come back for more.
    360DigiTMG PMP Certification
    360DigiTMG PMP Course in malaysia
    360DigiTMG PMP Course
    360DigiTMG PMP Training in malaysia
    360DigiTMG PMP Training

    ReplyDelete
  5. You have done a amazing job with you websitedata science course

    ReplyDelete

  6. I am really enjoying reading your well written articles. It looks like you spend a lot of effort and time on your blog. I have bookmarked it and I am looking forward to reading new articles. Keep up the good work.
    360DigiTMG PMP Certification

    ReplyDelete
  7. This is also a very good post which I really enjoyed reading. It is not every day that I have the possibility to see something like this..data science course

    ReplyDelete
  8. Data Recovery begins upon once its affirmed from Client. Affirmation should be possible by email, telephone or direct contact on Percentage of Recovery, required time span, cost and installment mode.risc-group.co.uk

    ReplyDelete
  9. The average computer user has only a vague understanding of how their data is stored. They know they have this "hard drive thingy" inside the computer and they know that's where their data is kept. hard drive recovery melbourne

    ReplyDelete
  10. This blog contains more useful information. Thanks for this Informative blog
    Pega application
    Pega platform

    ReplyDelete
  11. Digital marketing consultants bring a wealth of experience and expertise to the table. Whether you’re looking to improve your SEO rankings, increase conversions, or build your brand, a consultant can help you achieve your goals. Go Big LA will your best choice if you are willing to make your own brand.

    ReplyDelete