In previous jQuery blog, I use a “span class” element to print out the “Hello World”. How about using a “DIV layer” to print out the “Hello World” with jQuery. The jQuery codes are almost the same. Let’s see how the codes look like:

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

    <script type="text/javascript">

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

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

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

        });
    </script>
</head>

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

The following diagram explain how the jQuery codes works:

Open the web page and the result should look like:

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 DIV layer on the web contents.