Print Hello World with jQuery

We already learned how to pop up a message box with jQuery when visitors open a web page. In this post, I am going to do something a little bit difficult with jQuery, but more interesting. Actually this is the most basic example of jQuery. Like other computer programming languages, let’s see how to print out the “Hello World!” greeting words with jQuery.

Add the following line of codes to the registered ready event:

// Declare a variable
var printText = “Hello World”;

// Display message on text field
jQuery(“.outputText”).text(printText);

You may ask “What is the .outputText?”

This is actually an element (e.g. class, <p>, <DIV>, etc..) layout on the web page contents.

Everything should be clear after seeing the HTML structure of the whole web page:

<head>                                                                  
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        jQuery("document").ready(function() {

                // Declare a variable
                var printText = "Hello World";

                // Display message on text field
                jQuery(".outputText").text(printText);

        });
    </script>
</head>

<body>
    <h1>Learning jQuery</h1>
    The printed text is: <span class="outputText">Print Here!</span>
</body>
</html>

The following diagram explain the whole process:

When you open the web page , you should see the “Hello World” appear inside the outputText span area:

Demo:

The printed text is: Print Here!

jQuery Example File:

Click here to download.

Please mouse right click the above link, then select “Save link as…” to download the example source file.

This jQuery blog discuss how to print out text on a selected element on the web contents.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>