JavaScript display text (JS show text ) | Example code

Use document.write JavaScript to display text in HTML web page. This way is writing text in the document itself.

document.write("text to write")

There are a few methods to JS show text

  • Writing text in the document itself
    • innerHTML property
    • document.write() method
  • Displaying text in a message/alert box or use other prompt
    • alert() box
    • confirm()
    • prompt()

Examples of JavaScript display text

Let’s have a look at some examples of specific methods.

innerHTML property

Using div with the ID, the script will auto load and write messages. You can use buttons and functions to avoid auto-load script.

 <!DOCTYPE html>
    <html>
    <body>
        <div id="show">
        </div>
        <script>

            document.getElementById("show").innerHTML = "Read here written into the HTML and JavaScript code.";
            
        </script>
    </body>
    </html>

Output:

JavaScript display text

document.write() method

Here is we are not using div or id, script will write the message on HTML Webpage.

 <!DOCTYPE html>
    <html>
    <body>
        <script>

            document.write("Display text")
            
        </script>
    </body>
    </html>

alert() box

There are many ways to use alert box, the simple way is:-

<!DOCTYPE html>
    <html>
    <body>
        <script>

            alert(" alert Box")
            
        </script>
    </body>
    </html>

Output:

JS show text alert box

Read more:JavaScript alert box Examples

Q: How to display text from the input field as HTML code?

Answer: Using ajax you can do it, it dynamically display and update text in webpage elements.

 <!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>   


      <textarea id="htmlinput"></textarea>
      
      <div id="target"></div>

      <script type="text/javascript">
        $("#htmlinput").on("input",function(){
          $("#target").html($(this).val());
      });
  </script>

</body>
</html>

Do comment if you have another question or doubts or suggestions on this topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.